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 =＆gt;如何实现所有标签折叠第一个标签。

Answer 1

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

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

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

Answer 2

经过一番思考后我才开始工作，这是代码：

        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 );
    }

Wordpress中折叠的jQuery UI手风琴

2 个答案: