UIkit 手风琴：如何使 accordion-title 内的链接可点击？

Question

<div class="uk-accordion" data-uk-accordion>

    <div class="uk-accordion-title">
       <h3><a href="#">Title</a></h3>
       <div>something else</div>
    </div>
    <div class="uk-accordion-content">...</div>    
</div>

默认情况下，一旦手风琴组件启动，.uk-accordion-title 的整个元素将变为可点击并点击它展开内容，即使用户正在点击其中的 link。我怎样才能让 link 可以点击并且只有点击其他地方才能展开内容？

Answer 1

目前，UIKit 的 Accordion 组件需要将“uk-accordion-title”和“uk-accordion-content”元素分组到 'parent' 中，而您的代码中缺少这一点。 UIKit 需要这个 parent 以便动态添加一个 uk-open class 到它，制作手风琴 'open'。所以，你原来的代码结构应该是这样的：

<div uk-accordion>
  <div>
    <div class="uk-accordion-title">
       <h3><a href="https://example.com">Accordion Title</a></h3>
       <div>some accordion sub-title here</div>
    </div>
    <div class="uk-accordion-content">
      Accordion content that is displayed when open.
    </div>
  </div>  
</div>

您的 <a> 元素未按预期工作的原因是因为默认情况下，当您单击 <a> 元素时，将允许单击事件 'propagate'。当点击发生在 UIKit 手风琴标题内时，UIKit 将 'trap' 该点击事件，并将覆盖其默认行为 - 将其用于 'open' 手风琴。

所以，为了阻止 UIKit 覆盖默认的 <a> 点击行为，你需要做的是让 <a> 元素阻止点击事件传播到 UIKit，比如这个：

<a href="https://example.com" onclick="event.stopPropagation();">

现在 UIKit 将看不到 'click'，也不会覆盖它 - <a> 元素将在单击时执行其通常的功能。

单击手风琴标题中的其他位置仍会生成 'click' 事件，该事件将被 UIKit 捕获，并会按预期打开手风琴。

UIkit 手风琴：如何使 accordion-title 内的链接可点击？

UIkit Accordion: How to make links inside accordion-title clickable?

javascript

accordion

uikit