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的用户产生问题（您不太在乎，但这始终取决于））。