jQuery

Question

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

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

非常简单的修复 - 添加一个 "open" 变量，当边栏打开时该变量变为 true，并在您的点击事件处理程序中计算该变量。

添加变量：

var open = false;

将变量修改器添加到您的打开和关闭函数中：

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

检查 fiddle 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');
}

这样，当用户点击按钮时，它会切换 class on/off，并且当他们点击按钮外部时，您已经有了将其关闭的代码。

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

jQuery .toggleClass(): http://api.jquery.com/toggleclass/

Answer 3

最简单和最可靠的方法是检查您的 classes 之一是否在按钮上处于活动状态。因此也不需要额外的变量。我会建议，决定一个 class 来控制其他。

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

Answer 4

先测试 .is-active class，然后再决定运行 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 或 open/close 按钮之外单击，如何删除 class

jQuery - How to remove class if clicking outside of div or open/close button

javascript

css

addclass

removeclass