时间戳

首页 > 解决方案 > 在外部单击时关闭由 .slideToggle 操作的 jQuery 菜单

jquery - 在外部单击时关闭由 .slideToggle 操作的 jQuery 菜单

问题描述

我见过一些类似的问题，但我的菜单打开/关闭功能是由 slideToggle() 而不是类操作的，我宁愿不更改我的 CSS 以使其工作。

当用户单击页面上的其他任何位置时，我需要关闭菜单。

HTML：

<div class="select">
    <button class="select__selector">Reveal menu</button>
    <ul class="select__select">
        <li class="select__option"><a></a></li>
        <li class="select__option"><a></a></li>
        ...
    </ul>
</div>

JS：

var langTrigger = jQuery('.select__selector');
var langList = jQuery('.select__select');

// Trigger active state.
langTrigger.click(function() {
    langTrigger.toggleClass('open');
    langList.slideToggle(200);
});

// Close list when page is loading.
langList.click(function() {
    langTrigger.click();
});

我已经尝试了一些东西，但这与我所得到的一样接近。

if((langTrigger).hasClass('open')) {
     jQuery('body').on('click', function() {
         langList.css({display: 'none'});
     });
}

标签： jqueryhtmlcss

解决方案

添加一个 div 并将其放置在您的整个网站上，如下所示：

<div class="overlay"</div>

.overlay{
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

然后是这样的：

    $('.opensmenu').click(function(){
         $('.menu').toggle();
         $('.overlay').show();
    });

    $('.overlay').click(function(){
         $('.menu').hide();
         $(this).hide();
    });

推荐阅读