我也可以通过单击其他元素来展开/折叠 JQuery ui Accordion 的内容吗？

Question

默认情况下，有内容标题来控制展开/折叠。但在我的情况下，我也可以通过其他元素展开/折叠内容。例如：

jquery ui accodion代码的基本结构：

<script>
    $(function() {
        $( "#accordion" ).accordion();
    });
    </script>



<div class="demo">

<div id="accordion">
    <h3><a href="#">Section 1</a></h3>
    <div>
        <p>
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
        odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
        </p>
    </div>
......
</div>

和现在。我还有另一个要素，就像：

<ul id="another elements can expand/collapse too">
    <li><a href="">  expand/collapse contents of section1 of id=accordion too</a></li>
........
</ul>

非常感谢！

Answer 1

更新 JQuery UI 后，手风琴上没有“活动”方法。因此，要折叠所有手风琴，请使用：

$('.accordion').accordion('option', {active: false});

Answer 2

折叠手风琴选项卡：

$('.accordion').accordion('activate', false );

展开第一个手风琴选项卡：

$('.accordion').each(function (idx, item) {
    if ($(item).accordion("option", "active") === false) {
        $(item).accordion('activate', 0);
    }
});

Answer 3

您可以使用 .activate 并传入 false 来以编程方式折叠所有元素。由于您一次只能打开一个元素，因此这将折叠显示该链接的任何打开的元素。仅当您将 collapsible 设置为 true 时，此功能才有效。

您可以传入要展开的其他元素，以便在单击时展开该元素。

Answer 4

我在手风琴最初加载后折叠/展开时遇到了麻烦。为了解决这个问题，我使用了：

$('#accordionId h3').click();

...它模仿单击标题区域并强制切换激活类。

感觉就像是黑客攻击，但它确实有效，贝斯特。

Answer 5

使用 Bootstrap:

    //To Expand
    var elem  = $(this).find('.accordionElement');
    elem.addClass("in");
    elem.attr("style","");
    elem.attr("aria-expanded",true);

那么你可以使用以下方法折叠：

    var elem  = $(this).find('.accordionElement');
    elem.removeClass("in");
    elem.attr("style","height: 0px;");
    elem.attr("aria-expanded",false);