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该变量在侧边栏打开时更改,并在单击事件处理程序中评估此变量.

添加变量:

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();
});

在这里查看小提琴