jQuery - 如果在div外部单击或打开/关闭按钮，如何删除类

Question

我是JS的新手，我无法弄清楚如何让它工作。 很感谢任何形式的帮助！ 所以我有一个汉堡包按钮，当点击时，通过向面板和按钮添加一个类，同时切换滑入式面板和汉堡包动画的动画。 如果用户点击面板外的任何地方，我已成功添加了一个点击事件来关闭面板，但我也无法获得汉堡包按钮来删除添加的类。 我希望用户同时拥有这两个选项（单击按钮或单击面板外部）。

HTML：

<ul class="nav nav--right">
  <li class="v-button--slide-right" id="toggle-menu">
    <button class="mpp-menu-icon mpp-menu-icon--cross toggle-menu">
      <span class="toggle"></span>
      <span class="menu">menu</span>
    </button>
  </li>
</ul>

<nav id="menu--slide-right" class="nav menu--slide-right">
  <ul class="main-menu">
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav><!-- end slide menu -->

JS：

jQuery(document).ready(function($) {

    var openSidebar = function() {
        $('.menu--slide-right').addClass('is-active');
        $('.toggle-menu').addClass('is-active');
        $('#toggle-menu').addClass('toggle-close');
    }
    var closeSidebar = function() {
        $('.menu--slide-right').removeClass('is-active');
        $('.toggle-menu').removeClass('is-active');
        $('#toggle-menu').removeClass('toggle-close');
    }


    $('.toggle-menu').click(function(event) {
        event.stopPropagation();
        openSidebar();
    });

    $(document).click(function(event) {
        if (!$(event.target).closest('.menu--slide-right').length) {
            closeSidebar();
        }
    });
});

这是一个JSFIDDLE来演示我到目前为止所拥有的内容

Answer 1

非常简单的修复 - 添加一个“打开”变量，当侧边栏打开时，该变量变为true ，并在click事件处理程序中评估此变量。

添加变量：

var open = false;

将变量mutators添加到open和close函数中：

var openSidebar = function(){
    $('.menu--slide-right').addClass('is-active');
    $('.toggle-menu').addClass('is-active');
    $('#toggle-menu').addClass('toggle-close');
    open = true; //This is the new part!
}

然后切换按钮单击时调用哪个函数 - 我用三元运算符实现：

$('.toggle-menu').click( function(event) {
    event.stopPropagation();
    var toggle = open ? closeSidebar : openSidebar;
    toggle();
});

在这里查看小提琴

Answer 2

解决此问题的一种快速而肮脏的方法是更改​​openSideBar函数以使用jQuery的toggleClass方法，即：

 var openSidebar = function() {
  $('.menu--slide-right').toggleClass('is-active');
  $('.toggle-menu').toggleClass('is-active');
  $('#toggle-menu').toggleClass('toggle-close');
}

这样，当用户点击该按钮时，它将打开/关闭该类，并且您已经有代码在他们点击按钮外部时将其关闭。

在这里查看： https ： //jsfiddle.net/5ssccz2a/2/

jQuery .toggleClass（）： http ：//api.jquery.com/toggleclass/

Answer 3

最简单和最健壮的方法是检查您的某个类是否在按钮上处于活动状态。 因此也不需要额外的变量。 我建议，决定一个班级来控制其他班级。

$('.toggle-menu').click(function(event) {
      if ($('.toggle-menu').hasClass('is-active') {
         closeSidebar();
      }
      else {
         openSidebar();
      }
      event.stopPropagation();
  });

Answer 4

试验.is-active等级决定是否运行之前closeSidebar()或openSidebar()时.toggleMenu被点击。

$('.toggle-menu').click( function(event) {
    event.stopPropagation();
    if( $(this).is('.is-active') ) {
        closeSidebar();
    } else {
        openSidebar();
    }
});

DEMO

或者，使用三元运算符：

$('.toggle-menu').click( function(event) {
    event.stopPropagation();
    $(this).is('.is-active') ? closeSidebar() : openSidebar();
});

DEMO