JQuery响应菜单获胜'不起作用

JQuery responsive menu won't work

本文关键字：不起作用 获胜 响应 菜单 JQuery      更新时间：2023-09-26

我是一个新手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>

使用：

#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 */
}

你也可以反过来，在#菜单中默认设置一个.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禁用用户的问题（您不应该太在意，但这始终取决于情况。）。

相关文章：