如何在display:none和display:block之间切换

How to toggle between display:none and display:block

本文关键字：display 之间 block none      更新时间：2023-09-26

响应式菜单

我有一个包含4个元素的导航菜单。其中一个不显示(display:none)。当你将窗口大小调整为700px时，导航菜单出现，其他3个元素被隐藏。当你点击"菜单"时，JQuery会选择所有隐藏的元素，并将它们显示为块元素。但是当你第二次点击"菜单"时，什么都没有发生。不知道如何修复JQuery代码。有人能帮忙吗?

HTML: 

<ul class="topnav">
    <a href="javascript:void(0);" onclick="myFunction()"><li class="menu">Menu</li></a>
    <li>test 1</li>
    <li>test 2</li>
    <li>test 3</li>
</ul>
CSS: 

    .topnav {
        max-width: 900px;
        margin: 0 auto;
        text-align: center;
    }
    .topnav li {
        display: inline-block;
        padding: 10px;
    }
    li.menu {
        display: none;
    }
@media screen and (max-width:700px) {
    .topnav li {
        display: none;
    }
    li.menu {
        display: block;
    }   
}
JQuery: 

function myFunction() {
        if($("ul.topnav li:hidden")) {
            $("ul.topnav li:hidden").css("display", "block");
        }
        else  {
            $("ul.topnav li:not(:first-child)").css("display", "none");
        }
    }

在像$("ul.topnav li:hidden")这样的表达式中传递一个选择器给jQuery， 总是返回一个jQuery对象。因此,

    if($("ul.topnav li:hidden")) {

将总是成功，因为对象引用总是"真值"。如果你想测试选择器是否匹配任何元素:

    if($("ul.topnav li:hidden").length) {

将检查长度是否为非零。

编辑和在评论我的回答指出，jQuery .toggle()方法可能适合您的需要，使您的代码更简单，更短。

如果使用jQuery，则永远不需要使用属性事件处理程序。有几种方法可以达到你的目标。.toggle()可能是最容易使用的方法。顺便说一句，我不明白你在<a>里面有一个<li>的布局，所以我重新安排了一些元素，所以它是有效的。

片段

$('.menu').on('click', function(e) {
  e.preventDefault();
  $('.topnav li').toggle();
});
.topnav {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.topnav li {
  display: inline-block;
  padding: 10px;
}
.menu {
  display: none;
}
@media screen and (max-width: 700px) {
  .topnav li {
    display: none;
  }
  .menu {
    display: block;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#/" class='menu'>Menu</a>
<ul class="topnav">
  <li>test 1</li>
  <li>test 2</li>
  <li>test 3</li>
</ul>

首先，你不能将<a>标签作为<ul>的直接后代。

对于jQuery，更好的做法是使用 jQuery来挂钩点击事件，而不是使用内联onClick处理程序。

最后，最好对父元素<ul>应用一个类来控制它的子元素的显示属性，而不是对列表项应用内联样式。

重构代码:https://jsfiddle.net/00wdb9q6/1/

$('li.menu').on('click',function(){
  $(this).parent().toggleClass('show-items');
});
相关文章：