javascript - 单击时，使菜单在菜单上消失。 "show"有效，但 "hide"无效

Question

我的菜单中有一个投资组合元素，然后在桌面悬停时变成下拉菜单，然后在移动设备上单击。手机的问题是第一次点击显示菜单，这一切都很好，但接下来的点击不会改变任何东西。

我试过了 .toggle() , .toggleClass() ，这两个似乎都不起作用。我目前正在测试 if/else 语句，如下面的 JavaScript 所示。 “如果窗口宽度小于 940 像素”...然后“如果当前 visibility 是 hidden ，则在单击父项时将其更改为 visibility: visible”，反之亦然。

编辑:

我只在小于 940 像素的浏览器窗口中对此进行测试，以模拟“移动”体验。

编辑#2:

我删除了 if window width < 940px出于这个问题的目的，因为这样回答可能更容易？

$(function() {
  
  if ($('.nav__portfolio ul').css('visibility', 'hidden') == true) {
    $('.nav__portfolio').on('click', function() {
      $('.nav__portfolio ul').css('visibility', 'visible');
    });

  } else {
    $('.nav__portfolio').on('click', function() {
      $('.nav__portfolio ul').css('visibility', 'hidden');
    });
  }
  
};

.nav__portfolio ul {
  visibility: hidden;

<li class="nav__portfolio"><p>PORTFOLIO</p>
  <ul>
    <li>Dropdown Item</li>
    <li>Dropdown Item</li>
    <li>Dropdown Item</li>
  </ul>
</li>

Answer 1

我猜你的主要问题是你传递给 if 语句的条件:

• $('.nav__portfolio ul').css('visibility', 'hidden') 不是 bool 值，因此它不会返回 true 或 假

您可以像这样比较该 css 属性的实际值:

$('button').on('click', function() {
  if ($('div').css('visibility') !== 'hidden') {
    $('div').css('visibility', 'hidden');
  } else {
    $('div').css('visibility', 'visible');
  }
})

div {
  height: 200px;
  margin: 20px 0;
  background: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Toggle the div</button>
<div></div>

---

实际代码中的逻辑类似于:

$('.nav__portfolio').on('click', function() {
  if ($('.nav__portfolio ul').css('visibility') == 'hidden') {
    $('.nav__portfolio ul').css('visibility', 'visible');
  } else {
    $('.nav__portfolio ul').css('visibility', 'hidden');
  }
})