UIkit Accordion组件：如何让accordion-title内部的链接可正常点击？

解决方法 #

你可以通过以下两种方案实现需求：

方案1：给内部链接添加事件阻止冒泡（最推荐）

不需要修改原有手风琴的初始化配置，只需要阻止链接的点击事件冒泡到上层的.uk-accordion-title元素即可，这样点击链接时不会触发展开折叠逻辑，只会执行链接本身的跳转行为。
你可以直接给链接加行内事件：

<div class="uk-accordion" data-uk-accordion>
    <div class="uk-accordion-title">
       <h3><a href="#" onclick="event.stopPropagation()">Title</a></h3>
       <div>something else</div>
    </div>
    <div class="uk-accordion-content">...</div>    
</div>

如果标题内有多个链接，也可以用JS批量绑定：

document.querySelectorAll('.uk-accordion-title a').forEach(link => {
  link.addEventListener('click', e => e.stopPropagation())
})

方案2：指定手风琴的触发目标元素

你也可以直接修改UIkit手风琴的触发区域配置，通过target参数指定只有特定元素才能触发展开折叠逻辑，避免整个标题区域都作为触发区。
示例如下，给需要触发折叠的元素单独加accordion-trigger类，再绑定到配置中：

<div class="uk-accordion" data-uk-accordion="target: .accordion-trigger">
    <div class="uk-accordion-title">
       <h3>
         <!-- 链接不加触发类，点击不会触发折叠 -->
         <a href="#">Title</a>
         <!-- 其他区域加触发类，点击触发折叠 -->
         <span class="accordion-trigger" style="margin-left: 10px;">展开/折叠</span>
       </h3>
       <div class="accordion-trigger">something else</div>
    </div>
    <div class="uk-accordion-content">...</div>    
</div>

内容的提问来源于stack exchange，提问作者shenkwen