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类（仅从此标头和动画中删除标头），请执行其他操作。这种方式还允许我们在活动标题上自定义样式。

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

2 个答案: