Onclick可見分隔框

我想在點擊菜單按鈕之後使移動導航可見。這裏是example。您需要縮小瀏覽器才能看到它。Onclick可見分隔框

我有這樣的手機導航按鈕

<div id="nav-trigger"> 
<span>Menu</span> 
</div>

當我點擊它應該做的＃NAV-移動DIV可見

<nav id="nav-mobile"> 
<ul> 
    <li class="akt">Teams</li> 
    <a href="partners.htm"><li>Partners</li></a> 
    <a href="contact.htm"><li>Contact</li></a> 
    <a href="guides.htm"><li>Guides</li></a> 
    <a href="streams.htm"><li>Streams</li></a> 
    <a href="shop.htm"><li>Shop</li></a> 
</ul> 
</nav> 
</div>

我一直在尋找一個良好的JavaScript解決方案但我的JavaScript仍然不夠好處理它。但是當我看到代碼時，我可以理解它。

在CSS中，我使用display：none和display：block來使導航可見並且對於特定的屏幕尺寸不可見。所以很容易得到一個javascript，使得在不同的div框中顯示：block啓用。

來源

2016-02-05 H. Kibo

你的HTML被搞砸了，所以我糾正了它。您只需切換菜單的可見性狀態。就可訪問性而言，這不是理想的方法，但您應該能夠根據需要開始並進行改進。

(function(trigger, menu) { 
 
    /** toggle menu class name on click */ 
 
    function fn(event) { 
 
    if (event.target.id === trigger.id || event.target.parentElement.id === trigger.id) { 
 
     menu.classList.toggle('hidden'); 
 
    } 
 
    } 
 
    document.addEventListener('click', fn, false); 
 
}(document.querySelector('#nav-trigger'), document.querySelector('#nav-mobile')));

.hidden { 
 
    display: none; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>Onclick visible div box</title> 
 
</head> 
 

 
<body> 
 

 
    <div id="nav-trigger"> 
 
    <span>Menu</span> 
 
    </div> 
 

 
    <nav id="nav-mobile" class="hidden"> 
 
    <ul> 
 
     <li class="akt">Teams</li> 
 
     <li><a href="partners.htm">Partners</a> 
 
     </li> 
 
     <li><a href="contact.htm">Contact</a> 
 
     </li> 
 
     <li><a href="guides.htm">Guides</a> 
 
     </li> 
 
     <li><a href="streams.htm">Streams</a> 
 
     </li> 
 
     <li><a href="shop.htm">Shop</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 

 
</body> 
 

 
</html>

來源

2016-02-05 00:45:02 colecmc

Onclick可見分隔框

回答

相關問題