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

Question

我的菜单中有一个项目组合项目，然后该项目成为悬停在桌面上的下拉菜单，并单击移动。 移动设备的问题在于，第一次单击会显示菜单，这一切都很好，但是接下来的单击不会改变任何内容。

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

编辑：

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

编辑＃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

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

Answer 3

您是否尝试过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;
}