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

【问题标题】：toggle show/hide for hidden menu buttons (responsive)切换隐藏菜单按钮的显示/隐藏（响应式）
【发布时间】：2016-02-10 15:42:17
【问题描述】：

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

如何执行 Javascript 设置 display:inline-block 类“MVisitorButton”中的按钮（变为显示：无；当浏览器宽度

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

【问题讨论】：

你试过代码了吗？你试过什么？
发布输出的 HTML 代码而不是 php 源代码
[Eric] 啊，好主意。我有 php 来显示菜单按钮将来自一个数组（从数据库中提取），因此如果我更改或向站点添加内容，它们的数量可能会有所不同。 [Cruiser] 我尝试了一些我在其他地方看到的不同的 javascript/jquery 想法，但从未让它们中的任何一个起作用。这个（替换的）代码现在在脚本部分包含一个函数 hideshow() ......但它不起作用。这是我总是陷入混乱的部分！
我越来越近了……
我离我越来越近了...请参阅我原始帖子中的 [第二次尝试] 代码部分。（我创建了一个在页面较宽时工作的 div，另一个具有不同 id 的 div 在页面较窄时通过单击 MENU 按钮隐藏/显示）它部分工作，但所需的菜单按钮仅在我出现时出现片刻点击，然后自动关闭。不知道为什么会这样。它似乎不是一个完美高效的代码设计，但有总比没有好。

标签： javascript jquery html css

【解决方案1】：

I have created a sample of Responsive Navbar using Codepen.

Sample Navbar

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

希望对您有所帮助。 :)

【讨论】：

【解决方案2】：

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

【讨论】：

谢谢。看看我今晚能否弄清楚如何应用它。

【解决方案3】：

感谢大家的努力，但我仍然对 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>

【讨论】：