单击时，使菜单在菜单上消失。 “显示”有效，但“隐藏”无效

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') 不是布尔值，因此它不会返回 true 或 false

您可以像这样比较该 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');
  }
})

Answer 2

您是否尝试过 hasClass/addClass/removeClass？

可能只需要一键监听

if ($(window).width() <= 940) {

    $('.nav__portfolio').on('click', function() {
        if ($('.nav__portfolio ul').hasClass('visibleClass') {
            $('.nav__portfolio ul').removeClass('visibleClass');
        } else {
            $('.nav__portfolio ul').addClass('visibleClass');
        }
    });
}

.nav__portfolio ul {
    visibility: hidden;
}

.nav__portfolio ul.visibleClass {
    visibility: visible;
}

Answer 3

使用toggle() 方法：

$('.nav__portfolio').on('click', function() {
   $('.nav__portfolio ul').toggle();
})

.nav__portfolio ul {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li class="nav__portfolio"><p>PORTFOLIO</p>
  <ul>
    <li>Dropdown Item</li>
    <li>Dropdown Item</li>
    <li>Dropdown Item</li>
  </ul>
</li>