javascript - 从其他控件关闭折叠面板( Accordion )

Question

我正在尝试通过标签的点击事件关闭并禁用 Accordion 。

单击标签时。 Accordion 应被禁用并关闭。我可以使用 addClass 方法禁用它

$('#c5').addClass('ui-state-disabled');

<div class="accordionHeader">
    <h3 id="c5">Advance Settings (C5)</h3>
    <div class="accordionContent">my content</div>
</div>

为了关闭 Accordion ，我尝试使用

$('#c5').prop('active',false);
$('#c5').attr('active',false);

两者都不起作用。

在必须从其他控件调用它之前我不想使用

$(".accordionHeader").accordion({
    header: "h3",
    collapsible: true,
    active: false
});

Answer 1

来自API Documentation :

Setting active to false will collapse all panels. This requires the collapsible option to be true.

因此，使用以下 HTML，

<div class="accordionHeader">
     <h3 id="c5">Advance Settings (C5)</h3>
     <div class="accordionContent">my content</div>
</div>
<label id='c5label'>Disable accordion <input type="checkbox" /></label>

此 JS 将在第一次单击标签“#c5label”时启动 Accordion 并关闭/禁用:

<script>
jQuery(document).ready(function($) {
    $(".accordionHeader").accordion({ collapsible: true });
    $('#c5label').click(function(){
        if( $( ".accordionHeader" ).accordion( "option", "active") === false )
            return;

        $('#c5').addClass('ui-state-disabled');
        $( ".accordionHeader" ).accordion( "option", "active", false );
    });
});
</script>