Jquery Accordion：将操作设置为标头内的特定元素

发布于 2024-09-02 01:30:00 字数 1314 浏览 3 评论 0原文

默认情况下，如果我们有这样的东西作为 jQuery Accordion 中的标题：

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

通过单击此上的任意位置，手风琴可以工作并切换下一个元素......

问题是，我们如何设置选项并选择特定元素（例如: 'div' 与类 '1' ) 单击它并切换手风琴。

我的意思是我不希望整个标题保持可点击状态。我只想单击标题内的图标或 div 或某些内容，然后打开/关闭手风琴。

谢谢

更新 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>
    </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',
});

此代码工作正常。但我想使用类似 ( header: 'h3>.one' ) 的东西意味着我想在标题内设置特定的类和元素，然后如果用户仅单击该元素，手风琴将打开或关闭...

原文

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>
    </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 ...

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不再让梦枯萎 2024-09-09 01:30:00

您可以在不希望具有手风琴切换效果的元素上使用点击处理程序返回 false，如下所示：

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

您可以在此处查看工作演示

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 原文

~没有更多了~