Question

我正在使用ShiftNav Pro插件，因为我想要一个在打开时推送网站的滑出菜单。

我希望使用菜单按钮打开时有一个黑色覆盖。但后来我希望它在菜单中使用一个单独的按钮关闭。

我使用此代码来实现叠加：

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应该足够了，因为它会在click上删除/添加类。这样您就不需要if / else语句。

第三： jQuery(this).toggleClass('overlay');中的'this'部分是指您点击的div。因此，如果您单击具有类.shiftnav-panel-close的close div，它将切换此div上的类。但您的'.overlay'类（显示叠加层）是在ID为#shiftnav-toggle-main-button的div上设置的。所以，你不应该引用'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/

当我打开/关闭具有不同元素的滑出菜单时叠加

1 个答案: