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

And here's a JSFIDDLE to demo what I have so far

Answer 1

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

添加变量：

var open = false;

将变量mutators添加到打开和关闭函数中：

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

检查小提琴here

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

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

4 个答案: