Question

我正试图通过标签的点击事件关闭和禁用手风琴。

单击标签时。手风琴应该被禁用和关闭。我可以使用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 Documentation：

将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＆＃39;：

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

关闭其他控件的折叠面板（手风琴）

1 个答案: