如何取消绑定活动元素上的单击事件并在单击另一个元素时再次绑定？

Question

我想使用示例更容易解释：

HTML:

<div class="boxset">
    <div class="box_header">  
        h1  
    </div>
    <div class="box">
        This is some text for box 1.
    </div>
</div>

<div class="boxset">
    <div class="box_header">  
        h2  
    </div>
    <div class="box">
        This is some text for box 2.
    </div>
</div>

<div class="boxset">
    <div class="box_header">  
        h3  
    </div>
    <div class="box">
        This is some text for box 3.
    </div>
</div>

JS:

$('.box_header').bind("click", function() {
    $('.box').not($(this).next('.box')).animate({
        'width': 'hide'
    });
    $(this).next().animate({
        'width': 'show'
    });
});

jsFiddle:

http://jsfiddle.net/rDHMF/

这是一个简单的横向手风琴菜单。现在，当我单击标题（h1、h2、h3）时，将显示其相应的内容，并且先前打开的内容将关闭。但是，我可以再次单击我刚刚单击的同一标题，它会自行收缩和扩展。

是否可以暂时取消绑定我刚刚单击的标题上的单击事件，以便当我单击它时“活动”标题将保持不变？然后当我单击另一个标题时再次绑定。如果是，怎么办？

Answer 1

这应该可以：

$('.box_header').bind("click", function() {
    $('.box').not($(this).next('.box')).animate({
        'width': 'hide'
    });
    $(this).next().animate({
        'width': 'show'
    });
});

您不需要取消/重新绑定事件，只需防止盒子在相同时收缩

Answer 2

我会以不同的方式做到这一点。每当用户单击标头时，都会向标头添加一个 active 类（并将其从其他标头中删除）。如果此标头已经具有 active 类，则执行其他操作（仅从此标头中删除标头并进行动画处理）。这种方式还允许我们自定义活动标题的样式。