开发者

Jquery Accordion : set action to a specific element inside header

by default, if we have something like this as a Header in jQuery Accordion :

<h3>
    <div class="1">TEXT</div>
    <div class="2">ICON</div>
    <div class="3">BUTTON</div>
</h3>

by clicking anywhere on this , accordion works and toggle the next element and ...

the question is , how can we set an option and select a specific element ( like: 'div' with class '1' ) to click on it to and toggle the accordion.

i mean i don't want the whole Header remain click able. i just want to click on a icon or div o something inside the header and toggle open/close the accordion.

thank you

Update 1 :

HTML :

<div id="testAcc">

    <h3>
        <div class="one">Text</div>
        <div class="two">Icon</div>
        <div class="three">Button</div>
    </h3>
    <div class="accBody">
        text text text text text text text text text text 
    </div>

    <h3>
        <div class="one">Text</div>
        <div class="two">Icon</div>
        <div class="three">Button</div>
    &开发者_如何学Pythonlt;/h3>
    <div class="accBody">
        text text text text text text text text text text 
    </div>

</div>

JS :

$('#testAcc').accordion({
        autoHeight: false,
        header: 'h3',
        collapsible: 'ture',
});

this codes working fine. but i want to use something like ( header: 'h3>.one' ) means i want to set a specific class and element inside the header , then if user click ONLY on that element, the accordion will open or close ...


You can return false with a click handler on the elements you don't want to have the accordion toggling effect, like this:

$('#testAcc').accordion({
  autoHeight: false,
  header: 'h3',
  collapsible: true
});
$("#testAcc .two, #testAcc .three").click(function() {
  return false;
});
​

You can see a working demo here

0

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜