JQuery 响应式菜单无法使用

Question

我是一名 Web 开发新手，没有真正的 jquery 知识，所以请多多包涵。我正在尝试制作一个简单的移动响应下拉菜单（理想情况下我想要向下滑动，但首先是婴儿步骤）。在大多数情况下，我想通了。但是，我为 "Unordered List" 分配了一个 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 a .hide：

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

CSS:

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

并切换 .hide class:

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

在这里你不会运行进入覆盖样式因为 priority 而且你不必使用 !important fix（但如果有任何问题，您可能会遇到禁用 JS 的用户的问题（您不应该太在意，但它总是取决于。））。

JQuery 响应式菜单无法使用

JQuery responsive menu won't work

javascript

jquery

toggleclass