1

我创建了一些快速的 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

4

3 回答 3

2

只需使用 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
    }   
});

小提琴

于 2013-02-15T19:27:11.187 回答
2

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

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

更好的方法是这样的

$("#expander_parent").on('click', '#expander.closed', function(){
    // Do your stuff
})
于 2013-02-15T19:26:02.680 回答
1

您可以执行此操作并在 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/

于 2013-02-15T19:39:49.353 回答