如何自动激活 Getuikit 手风琴答案

【问题标题】：How auto active Getuikit accordion如何自动激活 Getuikit 手风琴
【发布时间】：2023-03-26 01:22:01
【问题描述】：

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

【问题讨论】：

哪个版本的uikit？ 2个还是3个？
我正在使用 Getuikit 版本 2

标签： accordion getuikit

【解决方案1】：

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

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。

【讨论】：

【解决方案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

【讨论】：