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

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

我该如何做一个Javascript来设置显示：点击菜单按钮（它也应该关闭它们），在类“MVisitorButton”（它变成显示：无;浏览器为< 640像素宽）中的按钮的内联块当再次点击）即。在显示和隐藏这些按钮之间切换？

<!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>

来源

2016-02-10 phc_joe

您是否已经尝试过代码？你有什么尝试？ – Cruiser

发布输出HTML代码而不是PHP源代码 –

[Eric]啊，好主意。我有PHP显示，菜单按钮将来自一个数组（从数据库中提取），所以他们可能会有所不同，如果我改变或添加的东西到网站。 [巡洋舰]我尝试了一些我在其他地方看到的一些不同的javascript/jquery想法，但从来没有得到任何他们的工作。这个（替换）代码现在在脚本部分包含一个函数hideshow（）...但它不起作用。这是我总是糊涂的地方！ –

感谢大家的努力，但我仍然在使用javascript一个完整的混乱，并在认输，但我DID弄明白，似乎很好地工作一个纯CSS方法：

<!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>

来源

2016-02-12 19:31:59

可以使用两种不同的类并在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";

来源

2016-02-10 18:29:25 moomdid

谢谢你。将会看看我是否可以在今天晚上弄清楚如何使用它。 –

I have created a sample of Responsive Navbar using Codepen.

Sample Navbar

的在样本改变简单，我已经创建了一个导航栏，其变成一个下拉菜单作为只要浏览器宽度低于最小宽度即可。

希望它有帮助。 :)

来源

2016-02-10 19:40:46

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

回答

相关问题