javascript - JQuery 响应式菜单不起作用

Question

我是一名新手 Web 开发人员，没有真正的 jquery 知识，所以请耐心等待。我正在尝试制作一个简单的移动响应下拉菜单(理想情况下我想要向下滑动，但首先是婴儿步骤)。大多数情况下，我已经弄清楚了。然而，我为我的“无序列表”分配了一个 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 的用户的问题(您不应该太在意，但它始终取决于情况。))。