1

我试图在页面加载时实现折叠手风琴，除非有人转到特定选项卡。我有手风琴的工作，但不能让它崩溃。我正在使用 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 从链接中获取 id 参数来决定应该打开哪个选项卡。问题是如果没有 id 或 id=0 => 第一个选项卡，如何实现所有选项卡折叠。

4

2 回答 2

0

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

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

要允许人们再次关闭它，请设置collapsible: true

于 2012-09-26T03:15:11.210 回答
0

经过一番思考，我已经让它工作了，这是代码：

        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 );
    }
于 2012-09-26T12:33:25.850 回答