Question

当我点击问号图标（文档的右上角）时，我有一个打开的div。单击时，我添加了一个类，用于在关闭图标中转换问号图标。当我在div外面点击时，div关闭并且类被删除，关闭的图标变成问号图标。但现在当我单击文档时，只要div打开或关闭，它就会添加和删除类。

如果有人知道如何在div打开的情况下在文档上被删除时如何删除该类。感谢

jQuery('.showmenu').click(function(e){
      e.stopPropagation();
      jQuery('.about-btn').toggleClass( "active");
      jQuery('.about').slideToggle('fast');
  });

jQuery('.about').click(function(e){
    e.stopPropagation();
});

jQuery(document).click(function(){
jQuery('.about-btn').toggleClass( "active");
   jQuery('.about').slideUp('fast');
});

Answer 1

IMO 仅在/ $(document).click函数时添加/绑定$('.showmenu').click。稍后在$(document).unbind('click')函数

中执行$(document).click

前：

$('.showmenu').click(function (e) {
        e.stopPropagation();
        $('.about-btn').toggleClass("active");
        $('.about').slideToggle('fast');

        //Binding click function on document
        $(document).click(function () {
            $('.about-btn').toggleClass("active");
            $('.about').slideUp('fast');

            $(document).unbind('click'); //Unbind click
        });

    });

$('.about').click(function (e) {
    e.stopPropagation();
});

Answer 2

只删除课程active而不是切换它：

jQuery(document).click(function(){
   jQuery('.about-btn').removeClass( "active");
   jQuery('.about').slideUp('fast');
});

如果我理解正确的话，你在div之外点击时永远不需要设置班级active，所以应该这样做

Answer 3

不是将点击事件注册到document，而是可以在一起显示的弹出窗口下面有一个叠加层，而是在其上设置关闭事件寄存器。

或者你也可以将状态存储在一个变量中：

var isOpen = false;
jQuery('.showmenu').click(function(e){
  e.stopPropagation();
  jQuery('.about-btn').toggleClass( "active");
  jQuery('.about').slideToggle('fast');
  isOpen = true;
});

jQuery('.about').click(function(e){
  e.stopPropagation();
});

jQuery(document).click(function(){
  if(!isOpen) return; // early return if not opened
  jQuery('.about-btn').toggleClass( "active");
 jQuery('.about').slideUp('fast');
});

单击div外部时删除了类，但在div关闭时保持删除

3 个答案: