Question

我是一名没有真正jquery知识的新手网络开发人员，所以请耐心等待。我试图制作一个简单的移动响应下拉菜单（理想情况下我喜欢向下滑动，但宝贝会先迈出步伐）。在大多数情况下，我想通了。但是，我分配了我的＆＃34;无序列表＆＃34;一个ID选择器，它似乎不再起作用。我在俯瞰什么？提前谢谢！

这是我的代码：JSFiddle

＆＃13;

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

＆＃13;

.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;   
}

＆＃13;

<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>

＆＃13;

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 class：

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

在这里，您不会遇到重写优先级的样式，并且您不必使用!important 修复（但是如果您有任何疑虑，那么您可能会遇到与JS禁用的用户有关的问题（您不应该太在乎，但它总是取决于。）。

JQuery响应式菜单无法正常工作

1 个答案: