Wordpress中折叠的jQuery UI折叠

Question

我试图在页面加载时实现折叠折叠，除非有人转到特定的标签页。我的手风琴还能用，但就是收不开。我使用的是Wordpress平台，我的模板显示的输出如下：

<div id="accordion" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
            <section class="post-4 page type-page status-publish hentry clearfix">
                    <h1 class="entry-title acc-header dark-side ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0"><span class="ui-icon ui-icon-triangle-1-s"></span><a href="#">Boon Villas – it is all about partnership</a></h1>
                    <div class="the-content dark-side ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="height: 368px; display: block; " role="tabpanel">
                    Some content 1
                    </div><!-- end #the-content-->
        </section>
                <section class="post-4 page type-page status-publish hentry clearfix">
            <h1 class="entry-title acc-header dark-side ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1"><span class="ui-icon ui-icon-triangle-1-e"></span><a href="#6" id="6">Our Commitment</a></h1>
            <div class="the-content dark-side ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 368px; display: none; " role="tabpanel">
                Some content 2
            </div><!-- .the-content -->
    </section>

        <section class="post-4 page type-page status-publish hentry clearfix">
            <h1 class="entry-title acc-header dark-side ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1"><span class="ui-icon ui-icon-triangle-1-e"></span><a href="#10" id="10">Our People</a></h1>
            <div class="the-content dark-side ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 368px; display: none; " role="tabpanel">

                Some content 3
            </div><!-- .the-content -->
    </section>

        <section class="post-4 page type-page status-publish hentry clearfix">
            <h1 class="entry-title acc-header dark-side ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1"><span class="ui-icon ui-icon-triangle-1-e"></span><a href="#17" id="17">Languages Spoken</a></h1>
            <div class="the-content dark-side ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 368px; display: none; " role="tabpanel">

                Some content 4

            </div><!-- .the-content -->
    </section>

</div>

我的jQuery是：

        var accOpt = {
            active: false,
            header: '.acc-header',
            navigation: true,
            event: 'mouseover',
            fillSpace: false,
            animated: 'easeslide',
            collapsible: true,
            allwayOpen: false
        };
    var accTab = <?php if ( !$_GET['id']) { echo 0;} else {echo $_GET['id'];} ?>;
    $(document).ready(function(){
        $('#accordion').accordion( accOpt );
        $("#accordion").accordion( 'activate', accTab );
    });

我使用PHP从link获取id参数，以决定应该打开哪个选项卡。问题是，如果没有id或id=0 => first标签，如何实现所有标签的折叠。

Answer 1

经过重新思考，我已经让它正常工作了，代码如下：

        var tabID = <?php if ( !$_GET['id']) { echo 0;} else {echo $_GET['id'];} ?>; // set tabID to be open

    var accOpt = {
            active: false,
            header: '.acc-header',
            navigation: true,
            event: 'click',
            fillSpace: false,
            animated: 'easeslide',
            collapsible: true,
            allwayOpen: false
        };
    $('#accordion').accordion( accOpt );


    if ( tabID && tabID > 0 ) { //tabID is defined and tabID > 0 activate the tab

        $("#accordion").accordion( 'activate', tabID );
    }

Answer 2

这应该会导致页面加载时所有内容都被“折叠”。

$("#accordion").accordion({
      active: false
});

要允许用户再次关闭它，请设置collapsible: true