开发者

How to unbind click event on the active element and bind again when another element is clicked?

开发者 https://www.devze.com 2023-04-12 17:04 出处:网络
I guess it\'s easier to explain using an example: HTML: <div class=\"boxset\"> 开发者_运维知识库<div class=\"box_header\">

I guess it's easier to explain using an example:

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/

Here is a simple sideways accordion menu. Now when I click on a header (h1, h2, h3), its corresponding content will show and the previously opened one will close. However, I can click again on that same header I just clicked and it will contract and expand itself.

Is it possible to temporarily unbind the click event on the header I just clicked so that the 'active' header will just stay put when I click on it? Then bind again when I click on another header. If yes, how?


This should do:

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

You don't need to un/rebind the events, just prevent the box from contracting when it's the same


I would do that in a different way. Whenever a user clicks on a header add an active class to the header (and remove it from other headers). And do some other thing if this header already has an active class (only remove a header from this header and animate). This way also allows us to customize styles on active headers.

0

精彩评论

暂无评论...
验证码 换一张
取 消