Question

我使用简单的jquery addClass和removeClass函数来点击div的类，但它不起作用。它第一次工作，但第二次不工作。

这里是jsfiddle链接http://jsfiddle.net/chirag007/3xees0j8/

这是jquery代码。

$(".open-menu").click(function (e) { 
    $(".open-menu").addClass("close-menu1");
    $(".open-menu").removeClass("open-menu");
});

  $(".close-menu1").click(function (e1) {
      $(".close-menu1").addClass("open-menu");
      $(".close-menu").removeClass("close-menu1");
});

感谢您的帮助..

Answer 1

由于您没有使用delegation，因此无效。

jquery附加到在DOM上准备好类（open-menu）的元素（这就是第一次单击工作的原因），但是当类（{{1} }}稍后动态附加，它没有附加到事件like here的函数。

试

close-menu

see updated fiddle

Answer 2

在创建点击事件处理程序时，

close-menu1不存在。

您可以将其更改为修复解决方案的委托，但更简洁的解决方案是在元素上创建一个永不删除的类，然后检测其中应用了哪些其他类单一事件处理程序。

<div class="toggle-menu open-menu">menu</div>

$(".toggle-menu").click(function (e) {

    var $this = $(this);

    if ($this.hasClass("open-menu")){

        $this.addClass("close-menu1")
             .removeClass("open-menu");        
    }
    else
    {
         $this.addClass("open-menu")
              .removeClass("close-menu1");
    }    

    e.stopPropagation();
});

Answer 3

在jquery

中使用event delegation和toggleClass

$(document).on("click", ".toggle-menu" ,function (e) { 

    $(this).toggleClass("open-menu close-menu1");

});

DEMO

Answer 4

试试这个 http://jsfiddle.net/s7hmv6kq/

$("body").on('click','.open-menu',function (e) { alert('b');
    $(".open-menu").addClass("close-menu1");
    $(".open-menu").removeClass("open-menu");
});

 $("body").on('click','.close-menu1',function (e1) {alert('a');
    $(".close-menu1").addClass("open-menu");
    $(".close-menu1").removeClass("close-menu1");
});

添加删除类jquery无法正常工作

4 个答案: