Question

我对CSS或Javascript仍然不太好（现在几十个月没有编码工作生锈了）但是这是我的问题：我正在研究我希望将是一个非常简单的响应模型网站。当浏览器窗口足够大时，所有主菜单按钮都在页面顶部可见/排列，但如果窗口缩小到小于640px，则菜单按钮消失（由“display：none”隐藏; ）并出现一个标有“MENU”的按钮，用于切换相同隐藏按钮的显示。

我如何设置一个Javascript来设置display：inline-block，用于“MVisitorButton”类中的按钮（当显示器显示：无;当浏览器宽度<640px时），单击“菜单”按钮（也应关闭它们）再次点击时）即。在显示和隐藏这些按钮之间切换？

<!doctype html>

<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="initial-scale=1">
    <title>test</title>
    <script type="text/javascript">//show live dimensions of page in dimensions div
   window.onresize = displayWindowSize;
   window.onload = displayWindowSize;
   function displayWindowSize() {
       myWidth = window.innerWidth;
       myHeight = window.innerHeight;
       document.getElementById("dimensions").innerHTML = myWidth + "x" + myHeight;
   };

   function hideshow() {
        if (document.getElementById("MAINMENU").style.visibility = "hidden") {
        document.getElementById("MAINMENU").style.visibility = "visible" }
        else {
        document.getElementById("MAINMENU").style.visibility = "hidden"
        }
    }
    </script>


    <style>
    body {background-color: black; color: white; margin:0px; padding: 0px; }    
    .Mforms{display: inline;padding:0px;}
    .AllContent{display: block; max-width:1280px; margin-left:auto; margin-right:auto; background-color: white; color: black; padding:0px;} /*padding-right:-12px;*/
    .Mbutton{display: inline-block; width:16.5%; text-align: center;}  /* margin-right:-4px; padding-right:-4px; padding:-2px;  margin:0; float:left; height:330px;*/
    .MvisitorButton { /* a fancy button that lights up */
    display: inline-block; width:16.666666666667%; text-align: center;
    font-family: "DIN Condensed","Arial Narrow",arial,helvetica,sans-serif;
    font-weight: bold;
    font-size:10pt;
    margin: 0px;
    line-height: 25px;
    vertical-align: middle;
    border-style: solid;
    border-width: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    border-color:#030402;
    color:#F5ECCB; /*font tan*/
    background-image: radial-gradient(#425a36, #030402);
    }
    .MvisitorButton:hover {background-image: radial-gradient(#638851, #030402);}

    #MenuButton{
    display: none;
    width: 100%; text-align: center;
    font-family: "DIN Condensed","Arial Narrow",arial,helvetica,sans-serif;
    font-weight: bold;
    font-size:10pt;
    margin: 0px;
    line-height: 25px;
    vertical-align: middle;
    border-style: solid;
    border-width: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    border-color:#030402;
    color:#F5ECCB; /*font tan*/
    background-image: radial-gradient(#425a36, #030402);
    }

    @media all and (max-width: 639px)  { /*when display goes to phone width*/
/*    .AllContent{max-width:100%;} .MvisitorButton {width:100%; display:none;} /*display:none;should hide but snap button to full width*/ #MenuButton {width:100%; display:inline-block;}*/
    .AllContent{max-width:100%;} #MAINMENU {display:none;} /*display:none;should hide but snap button to full width*/ #MenuButton {width:100%; display:inline-block;}
    } 

    #dimensions{display: inline-block; width:100%; text-align: center;}
    .fullwide-center {display: inline-block; width:100%; text-align: center;}
    .fullwide {display: inline-block; width:100%; text-align: left;}
    .fullwide-right {display: inline-block; width:100%; text-align: right;}

    .logowrap{display: inline-block;max-width:350px;width:100%;}
        </style>

</head>

<body>
    <div class="AllContent"> <!--everything in a box centered on the page-->
    <!--<div class="fullwide-right">Testing: 1, 2, 3...</div>-->

<div id="MAINMENU"><form class="Mforms"><input class="MvisitorButton" type=submit value='One' /></form><form class="Mforms"><input class="MvisitorButton" type=submit value='Two' /></form><form class="Mforms"><input class="MvisitorButton" type=submit value='Three' /></form><form class="Mforms"><input class="MvisitorButton" type=submit value='Four' /></form><form class="Mforms"><input class="MvisitorButton" type=submit value='Five' /></form><form class="Mforms"><input class="MvisitorButton" type=submit value='Six' /></form></div><form class="Mforms"><input type=submit onclick="hideshow()" id="MenuButton" value="MENU" /></form>    <div class="fullwide-center"><!--<img src="../logos/LogoWeb5.png" class="logowrap">-->website logo goes here</div>
    <div class="fullwide">
        <p>Lorem ipsum blah blah blah...</p>
    </div>

    <div class="fullwide"><!--show some current content from the database-->
            </div>

        <div id="dimensions"><noscript>JavaScript must be enabled to utilize all functions on this page.</noscript></div>
    </div> <!--end of AllContent-->
</body>
</html>

[第二次尝试] （注意：上面的编辑中的某些内容搞砸了我有的紧凑按钮布局......在此代码中恢复了它）

<!doctype html>

<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="initial-scale=1">
    <title>test</title>
    <script type="text/javascript">//show live dimensions of page in dimensions div
   window.onresize = displayWindowSize;
   window.onload = displayWindowSize;
   function displayWindowSize() {
       myWidth = window.innerWidth;
       myHeight = window.innerHeight;
       document.getElementById("dimensions").innerHTML = myWidth + "x" + myHeight;
   };

   function hideshow(id) {
        if (document.getElementById(id).style.display = "none") {
        document.getElementById(id).style.display = "block"}
        else {
        document.getElementById(id).style.display = "none"
        }
    }
    </script>


    <style>
    body {background-color: black; color: white; margin:0px; padding: 0px; }    
    .Mforms{display: inline;padding:0px;}
    .AllContent{display: block; max-width:1280px; margin-left:auto; margin-right:auto; background-color: white; color: black; padding:0px;} /*padding-right:-12px;*/
    #PHONEMENU {display:none;}
    .Mbutton{display: inline-block; width:16.5%; text-align: center;}  /* margin-right:-4px; padding-right:-4px; padding:-2px;  margin:0; float:left; height:330px;*/
    .MvisitorButton { /* a fancy button that lights up */
    display: inline-block; width:16.666666666667%; text-align: center;
    font-family: "DIN Condensed","Arial Narrow",arial,helvetica,sans-serif;
    font-weight: bold;
    font-size:10pt;
    margin: 0px;
    line-height: 25px;
    vertical-align: middle;
    border-style: solid;
    border-width: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    border-color:#030402;
    color:#F5ECCB; /*font tan*/
    background-image: radial-gradient(#425a36, #030402);
    }
    .MvisitorButton:hover {background-image: radial-gradient(#638851, #030402);}


    .PhoneButton{
    display: inline-block;
    width: 100%; text-align: center;
    font-family: "DIN Condensed","Arial Narrow",arial,helvetica,sans-serif;
    font-weight: bold;
    font-size:10pt;
    margin: 0px;
    line-height: 25px;
    vertical-align: middle;
    border-style: solid;
    border-width: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    border-color:#030402;
    color:yellow; /*font tan*/
    background-image: radial-gradient(#425a36, #030402);
    }


    #MenuButton{
    display: none;
    width: 100%; text-align: center;
    font-family: "DIN Condensed","Arial Narrow",arial,helvetica,sans-serif;
    font-weight: bold;
    font-size:10pt;
    margin: 0px;
    line-height: 25px;
    vertical-align: middle;
    border-style: solid;
    border-width: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    border-color:#030402;
    color:#F5ECCB; /*font tan*/
    background-image: radial-gradient(#425a36, #030402);
    }

    @media all and (max-width: 639px)  { /*when display goes to phone width*/
/*    .AllContent{max-width:100%;} .MvisitorButton {width:100%; display:none;} /*display:none;should hide but snap button to full width*/ #MenuButton {width:100%; display:inline-block;}*/
    .AllContent{max-width:100%;} #PHONEMENU {display:none;} #MAINMENU {display:none;} /*display:none;should hide but snap button to full width*/ #MenuButton {width:100%; display:inline-block;}
    } 

    #dimensions{display: inline-block; width:100%; text-align: center;}
    .fullwide-center {display: inline-block; width:100%; text-align: center;}
    .fullwide {display: inline-block; width:100%; text-align: left;}
    .fullwide-right {display: inline-block; width:100%; text-align: right;}

    .logowrap{display: inline-block;max-width:350px;width:100%;}
        </style>

</head>

<body>
    <div class="AllContent"> <!--everything in a box centered on the page-->
    <!--<div class="fullwide-right">Testing: 1, 2, 3...</div>-->

<div id="MAINMENU"><form class="Mforms"><input class="MvisitorButton" type=submit value='One' /></form><form class="Mforms"><input class="MvisitorButton" type=submit value='Two' /></form><form class="Mforms"><input class="MvisitorButton" type=submit value='Three' /></form><form class="Mforms"><input class="MvisitorButton" type=submit value='Four' /></form><form class="Mforms"><input class="MvisitorButton" type=submit value='Five' /></form><form class="Mforms"><input class="MvisitorButton" type=submit value='Six' /></form></div><form class="Mforms"><input type=submit onclick="hideshow('PHONEMENU')" id="MenuButton" value="MENU" /></form><div id="PHONEMENU"><form class="Mforms"><input class="PhoneButton" type=submit value='One' /></form><form class="Mforms"><input class="PhoneButton" type=submit value='Two' /></form><form class="Mforms"><input class="PhoneButton" type=submit value='Three' /></form><form class="Mforms"><input class="PhoneButton" type=submit value='Four' /></form><form class="Mforms"><input class="PhoneButton" type=submit value='Five' /></form><form class="Mforms"><input class="PhoneButton" type=submit value='Six' /></form></div>    <div class="fullwide-center"><!--<img src="../logos/LogoWeb5.png" class="logowrap">-->website logo goes here</div>
    <div class="fullwide">
        <p>Lorem ipsum blah blah blah...</p>
    </div>

    <div class="fullwide"><!--show some current content from the database-->
            </div>

        <div id="dimensions"><noscript>JavaScript must be enabled to utilize all functions on this page.</noscript></div>
    </div> <!--end of AllContent-->
</body>
</html>

Answer 1

你可以使用两个不同的类并在css中设置它们并使用javaScript函数更改它们。

function toggleClass(hideClass, showClass, elementId) {
    var elem = document.getElementById(elementId)
    if (elem.className ==  hideClass) {
        elem.removeAttribute("class");
        elem.setAttribute("class", showClass)
    } else {
        elem.removeAttribute("class");
        elem.setAttribute("class", hideClass)
    }
}

或者使用此行而不是两行

更改简单

document.getElementById("MyElement").className = "MyClass";

Answer 2

I have created a sample of Responsive Navbar using Codepen.

Sample Navbar

在示例中，我创建了一个导航栏，一旦浏览器宽度低于最小宽度，就会变成下拉菜单。

希望它有所帮助。：）

Answer 3

Thanks for everyone's efforts, but I'm still in a complete muddle with javascript and threw in the towel: but I DID figure out a pure CSS method that appears to work perfectly:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="initial-scale=1">
<meta charset=utf-8 />
<title>DEMO</title>
<script type="text/javascript">//show live dimensions of page in dimensions div
window.onresize = displayWindowSize;
window.onload = displayWindowSize;
function displayWindowSize() {
   myWidth = window.innerWidth;
   myHeight = window.innerHeight;
   document.getElementById("dimensions").innerHTML = myWidth + "x" + myHeight;
};
</script>

<?php
$buttons=array("One", "Two", "Three", "Four", "Five", "Six", "Seven"); //test array
$buttoncount=count($buttons);
$buttonwidth=(100/$buttoncount);
?>

<style>
body {background-color: black; color: white; margin:0px; padding: 0px; }    
.Mforms{display: inline;padding:0px;}
    .MvisitorButton { /* a fancy button that lights up */
    display: inline-block; width:<?php echo $buttonwidth;?>%; text-align: center;
    font-family: "DIN Condensed","Arial Narrow",arial,helvetica,sans-serif;
    font-weight: bold;
    font-size:10pt;
    margin: 0px;
    line-height: 25px;
    vertical-align: middle;
    border-style: solid;
    border-width: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    border-color:#030402;
    color:#F5ECCB; /*font tan*/
    background-image: radial-gradient(#425a36, #030402);
    }
    .MvisitorButton:hover {background-image: radial-gradient(#638851, #030402);}

.PhoneButton{
display: inline-block;
width: 100%; text-align: center;
font-family: "DIN Condensed","Arial Narrow",arial,helvetica,sans-serif;
font-weight: bold;
font-size:10pt;
margin: 0px;
line-height: 25px;
vertical-align: middle;
border-style: solid;
border-width: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
border-color:#030402;
color:yellow; /*font tan*/
background-image: radial-gradient(#425a36, #030402);
}
.PhoneButton:hover {background-image: radial-gradient(#638851, #030402);}

.PhoneButton + input{
  display:none;
}
.PhoneButton + input + *{
  display:none;
}
.PhoneButton+ input:checked + *{
  display:block;
}

.PMU{display:none; width: 100%;}

.AllContent{display: block; max-width:1280px; margin-left:auto; margin-right:auto; background-color: white; color: black; padding:0px;
.showme{display: inline-block;} .PMU{display:none;}
} /*padding-right:-12px;*/
@media all and (max-width: 639px) {.PMU{display: inline-block;} .showme{display: none;}}

</style>

</head>
<body>
<?php    
foreach($buttons as $buttonface) {
$btnsA.= "<form class=\"Mforms\"><input class=\"MvisitorButton\" type=submit value='".$buttonface."' /></form>";
$btnsB.= "<form class=\"Mforms\"><input class=\"PhoneButton\" type=submit value='".$buttonface."' /></form>";
}   
?>  

<div class="AllContent">
<div class="showme"><?php echo $btnsA; ?></div>
 <div class="PMU">   
<label class="PhoneButton" for="phonemenu" >MENU</label>
<input id="phonemenu" class="PhoneButton" type="checkbox">
<div><?php echo $btnsB; ?></div>
</div>
<p>Blah...</p>
</div>

</body>
</html>

切换显示/隐藏隐藏菜单按钮（响应）

3 个答案: