如何自动激活 Getuikit 手风琴

Question

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

Answer 1

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

这是给你的 working pen。

Answer 2

如果我没记错的话，您希望默认保留第一个手风琴。正确的？如果是，您不需要为此做任何额外的代码。作为解决方案本身的 Uikit。

你只需要把 uk-open 放在第一个

，看看下面的代码和 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>

也看看 CodePen : Codepen

如何自动激活 Getuikit 手风琴

How auto active Getuikit accordion

accordion

getuikit