Question

响应式菜单

我有一个包含4个元素的导航菜单。其中一个未显示（显示：无）。当您将窗口调整为700px时，会出现导航菜单，其他3个元素将被隐藏。当您单击“菜单”时，JQuery会选择所有隐藏的元素并将其显示为块元素。但是当你第二次点击“菜单”时没有任何反应。无法弄清楚如何修复JQuery代码。有人可以帮忙吗？

HTML：

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

CSS：

function myFunction() {

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

    }

JQuery的：

Maximize objekt: 3x + 2y
Subject To objekt1: 2x + y <= 100 objekt2: x + y <= 80
Bounds x >= 0 x <= 40 y >= 0
End

Answer 1

将选择器传递给像if(m < 3) { y--; }这样的表达式中的jQuery，总是会导致返回一个jQuery对象。因此，

$("ul.topnav li:hidden")

将始终成功，因为对象引用始终是“真实的”。如果要测试选择器是否匹配任何元素：

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

将检查长度是否为非零。

编辑并且在对我的回答的评论中指出，jQuery if($("ul.topnav li:hidden").length) {方法可能适合您的需求并使您的代码更简单和更短。

Answer 2

如果使用jQuery，则永远不需要使用属性事件处理程序。有几种方法可以实现您的目标。.toggle()可能是最简单的方法。顺便说一句，我不理解你在<li>内有<a>的布局，所以我重新排列了一些元素，这样才有效。

段

$('.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>

Answer 3

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

使用jQuery，使用 jQuery挂钩点击事件，而不是内联onClick处理程序也更好。

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

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

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

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

3 个答案:

段