jQuery響應式菜單不起作用

Question

我是一位沒有真正的jquery知識的新手Web開發人員，所以請耐心等待。 我正在嘗試制作一個簡單的移動響應下拉菜單（理想情況下，我想滑下來，但嬰兒要先走）。 在大多數情況下，我都知道了。 但是，我為我的“無序列表”分配了ID選擇器，它似乎不再起作用。 我在俯視什么？ 提前致謝！

這是我的代碼： JSFiddle

 $(document).ready(function(){ $('#toggle-button').click(function(){ $('#menu').toggleClass('show'); }); }); 

 .show { display: block; } nav { background: black; width: 100%; } .menu-bar { width: 100%; background: black; height: 50px; } #toggle-button { position: absolute; top: 15px; right: 60px; height: 35px; width: 35px; background: red; cursor: pointer; display: block; } #menu { list-style: none; width: 100%; display: none; margin: 0px; padding: 0px; } #menu li { height: 50px; background: #535252; } #menu li a { display: block; width: 100%; height: 50px; text-align: center; line-height: 50px; color: white; text-decoration: none; cursor: pointer; } #menu li:hover { background: gray; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="menu-bar"></div> <nav> <ul id="menu"> <li><a href="#">Profile</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Profile</a></li> </ul> </nav> <a id="toggle-button" href="#"></a> 

Answer 1

采用：

#menu.show {
    display: block;
}

后！ 您為#menu {
https://jsfiddle.net/nw2wf3uh/6/

---

或者使用不太好的!important ：
https://jsfiddle.net/nw2wf3uh/7/

.show {
    display: block !important; /* if .show is placed before #menu styles in CSS */
}

---

你也可以去周圍的其他方法，設置為您#menu一個.hide默認情況下：

 <ul id="menu" class="hide">

CSS：

.hide {
    display: none;    /* but remove display:none; from #menu now! */
}

並切換該.hide類：

$('#toggle-button').click(function(){
  $('#menu').toggleClass('hide');
  // or simply: $('#menu').toggle();
});

在這里，您不會遇到優先使用優先級的樣式，也不必使用!important 修復程序 （但是，如果您對此感到擔憂，則可能會對禁用JS的用戶產生問題（您不太在乎，但這始終取決於））。