切換顯示/隱藏隱藏的菜單按鈕（響應）

我仍然不太好用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

切換顯示/隱藏隱藏的菜單按鈕（響應）

回答

相關問題