2017-01-30 6 views
0

私はGetuikitで私の問題を解決したい。 Accordionプラグインが動作しています。しかし、私はページの読み込みにアクティブな(クリックした)特定のアコーディオンを作りたい。 どうすればいいですか?どのように自動アクティブGetuikitアコーディオン

編集:getuikit v2の

<div class="uk-accordion" data-uk-accordion="{collapse: false}"> 
    <h3 class="uk-accordion-title">Accordion 1</h3> 
    <div class="uk-accordion-content"> 
     <!-- Content --> 
    </div> 

    <h3 class="uk-accordion-title">Accordion 2</h3> 
    <div class="uk-accordion-content"> 
     <!-- Content --> 
    </div> 

    <h3 class="uk-accordion-title">Accordion 3</h3> 
    <div class="uk-accordion-content"> 
     <!-- Content --> 
    </div> 

    <h3 class="uk-accordion-title">Accordion 4</h3> 
    <div class="uk-accordion-content"> 
     <!-- Content --> 
    </div> 
</div> 

例:どのように "アコーディオン3 &アコーディオン4" アクティブにしますか?

+0

どのバージョンのuikit? 2または3? – cssBlaster21895

+0

Getuikitバージョン2を使用しています – FreeSoulTR

答えて

1

私はanswerが見つかりました。いくつかの親切な人がページ上ですべてのアコーディオンを開くので、コードをちょっと微調整しました。 initで開くアコーディオンを選択することができます。

UIkit.on('afterready.uk.dom', function() { 
var accordion = UIkit.accordion(UIkit.$('#myAccordion'), {collapse:false, showfirst: false}); 
//choose which number of accordion interest you, here we choose 1 and 3, index starts from 0 
accordion.find('[data-wrapper]').each(function (index) { 
    if (index==0 || index==2) 
    accordion.toggleItem(UIkit.$(this), true, false); // animated true and collapse false 
    }); 
}); 

ここにはworking penがあります。

+0

私は申し訳ありませんが、私のために実行されていません。 – FreeSoulTR

+0

jqueryとuikitの後にスクリプトを含めましたか?多分私はフィドルを準備することができます – cssBlaster21895

+0

また、アコーディオンにid属性を追加しようとし、アコーディオンを選択する – cssBlaster21895

関連する問題