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

我想用一个例子来解释更容易：

HTML:

jsFiddle：

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

是否可以暂时解除我刚才单击的标题上的click事件的绑定，以便在我单击时“active”标题将保持不变？然后在单击另一个标题时再次绑定。如果是，怎么做？

这应该是：

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

---

您不需要取消/重新绑定事件，只要在相同的情况下防止框收缩即可

我将以不同的方式执行此操作。每当用户单击标题时，向标题添加一个

active

类（并将其从其他标题中删除）。如果此标题已经有一个

活动的

类，则执行其他操作（仅从该标题中删除标题并设置动画）。通过这种方式，我们还可以自定义活动标题上的样式。

非常有效。谢谢我想我需要绑/解开。

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

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