0

我想用 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>

示例：如何激活“Accordion 3 & Accordion 4”？

4

2 回答 2

2

我在 SO 上找到了答案。这里有人打开页面上的所有手风琴，所以我为你稍微调整了代码。您可以选择要在初始化时打开哪个手风琴。

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

这是给你的工作笔。

于 2017-01-30T20:35:07.790 回答
0

If I am not wrong, You are looking to keep by default first accordion. right? If yes you don't need to do any extra code for this. As Uikit as the solution itself.

You just have to put uk-open with first

  • , take a look at below code and codepen.

    <ul uk-accordion>
<li class="uk-open">
    <a class="uk-accordion-title" href="#">Item 1</a>
    <div class="uk-accordion-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
</li>
<li>
    <a class="uk-accordion-title" href="#">Item 2</a>
    <div class="uk-accordion-content">
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
    </div>
</li>
<li>
    <a class="uk-accordion-title" href="#">Item 3</a>
    <div class="uk-accordion-content">
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
    </div>
</li>

    Look at CodePen too : Codepen

    • 于 2021-05-11T09:13:29.850 回答