javascript - jQuery基本切换仅以一种方式工作

Question

我创建了一些快速的 jQuery 切换代码：

$("#expander.closed").click(function(){
    console.log("opening");
    $("#expander").removeClass();
    $("#expander").addClass("open");
});
$("#expander.open").click(function(){
    console.log("closing");
    $("#expander").removeClass();
    $("#expander").addClass("closed");
});

这个想法是每次您单击类时都会在和#expander之间切换。openclosed

但是，由于某种原因，它只工作一次，从closed变为open，然后不再继续。

我不知道为什么。这是一个 jsFiddle。

Answer 1

只需使用 id 绑定它并使用.toggleClass切换类

$("#expander").click(function(){
    $(this).toggleClass('open closed');
});

小提琴

如果您需要根据它具有的类执行其他功能，您可以像这样检查

$("#expander").click(function(){
    var $this = $(this);
    $this.toggleClass('open closed');
    if($this.hasClass('open')){
       // do your open code
    }else{
       // do your close code
    }   
});

小提琴

Answer 2

我想一开始，当你绑定事件时，.closed类不存在，所以事件没有被绑定

可能您应该将事件绑定到其他条件，或者使用live. 虽然已弃用

更好的方法是这样的

$("#expander_parent").on('click', '#expander.closed', function(){
    // Do your stuff
})

Answer 3

您可以执行此操作并在 if/else 条件中添加其他相关操作

HTML：

<div id="expander" class="closed">Click Me</div>

CSS：

.closed {
    background-color: red;
}

.open {
    background-color: blue;
}

Javascript：

$("#expander.closed").click(function (){
    if ($('#expander').attr('class') === 'closed') {
          $('#expander').attr('class', 'open');

          // Add other related functions here
    } else {
        $('#expander').attr('class', 'closed');

        // Add other related functions here
    }    
});

http://jsfiddle.net/mCDwy/1/