UIkit 手風琴：如何使手風琴標題中的鏈接可點擊？

Question

賞金將在 7 天后到期。 這個問題的答案有資格獲得+50聲望獎勵。 shenkwen正在從信譽良好的消息來源處尋找答案。

<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的整個元素都將變為可點擊的，點擊它會擴展內容，即使用戶點擊其中的鏈接也是如此。 如何使鏈接可點擊並且只有點擊其他地方才能擴展內容？

Answer 1

目前，UIKit 的 Accordion 組件需要將“uk-accordion-title”和“uk-accordion-content”元素分組到“父”中，而您的代碼中缺少該元素。 UIKit 需要這個父類來動態地向它添加一個uk-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>元素時，將允許單擊事件“傳播”。 當單擊發生在 UIKit 手風琴標題內時，UIKit 將“捕獲”該單擊事件，並將覆蓋其默認行為 - 使用它來“打開”手風琴。

因此，為了阻止 UIKit 覆蓋默認的<a>點擊行為，您需要做的是讓<a>元素阻止點擊事件傳播到 UIKit，如下所示：

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

現在 UIKit 將看不到“點擊”，也不會覆蓋它 - 當點擊時<a>元素將被允許執行其通常的功能。

單擊手風琴標題中的其他位置仍將生成“單擊”事件，該事件將被 UIKit 捕獲，並將按預期打開手風琴。