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 に答える