打开/关闭具有不同元素的滑出菜单时覆盖

Question

我使用的ShiftNav专业插件，因为我想要一个滑动菜单，推动网站打开时。

我希望它有一个黑暗的覆盖打开时，使用菜单按钮。但我想要它关闭使用菜单中的一个单独的按钮。

我使用这段代码来实现覆盖：

jQuery('#shiftnav-toggle-main.shiftnav-toggle-edge-right .shiftnav-toggle-burger').on("click",function() {
  if(jQuery('.overlay').length == 0) {
    jQuery(this).toggleClass('overlay');
  }
  else {
    jQuery(this).removeClass('overlay');
  }
});

但是当我点击菜单中的关闭菜单按钮，而不是仅仅关闭菜单，覆盖不会消失。只有当我单击菜单外部时，它才会消失。

Answer 1

您的代码有多个问题。

第一，关闭按钮不会触发代码。您还必须添加类.shiftnav-panel-close，因为这是关闭按钮的类：

第二步：，您使用的是toggleClass和removeClass函数。但是toggleClass应该足够了，因为它在单击时删除/添加了类。这样，您就不需要if/else语句。

第三部分：-- jQuery(this).toggleClass('overlay');中的“this”部分是指您单击的div。因此，如果您使用类.shiftnav-panel-close单击关闭div，它会在这个div上切换这个类。但是，您的“.overlay”类(用于显示覆盖)在div上设置了id #shiftnav-toggle-main-button。因此，您不应该引用“this”，而应该引用id #shiftnav-toggle-main-button的div。

最终代码：

$('#shiftnav-toggle-main-button, .shiftnav-panel-close').on('click', function(){ // On click on menu button or close button

    $("#shiftnav-toggle-main-button").toggleClass('overlay'); //Toggle class .overlay

});

JSFiddle:

https://jsfiddle.net/Ljjyth06/2/