從其他控件關閉折疊面板（手風琴）

Question

我正在嘗試從標簽的click事件關閉和禁用手風琴。

單擊標簽時。 手風琴應該被禁用和關閉。 我可以使用addClass方法禁用它

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

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

為了關閉手風琴，我嘗試使用

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

都不行。

我不想使用之前必須從其他控件調用它

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

Answer 1

從API文檔中 ：

將active設置為false將折疊所有面板。 這要求collapsible選項為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時關閉/禁用它：

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