如何使链接文本可点击以激活 Bootstrap 可折叠？答案

【问题标题】：How do you make a link_to text clickable to activate a Boostrap collapsible?如何使链接文本可点击以激活 Bootstrap 可折叠？
【发布时间】：2021-12-18 20:53:51
【问题描述】：

我有这段代码用于可折叠的标题文本和一个插入符号，它可以折叠/取消折叠 div 。

<span><strong>"Weekly"</strong></span> <a class="caret" type="button" data-toggle="collapse" data-target="#weekly" aria-expanded="false" aria-controls="weekly"></a>

<div class="collapse overflow-hidden" id="weekly">
  # Collapsible content
</div>

我想让插入符号旁边的标题文本也可点击，以便为用户提供更大的点击区域以折叠/取消折叠相应的div。

我尝试将span 和a 标记在link_to 中，但结果不理想（文本链接到代表id 的锚点，div 未折叠）。

实现此目的的正确方法是什么？

【问题讨论】：

标签： javascript html ruby-on-rails ruby twitter-bootstrap

【解决方案1】：

如果将所有内容放在顶部容器的按钮中，则可以使其可点击。

例子：

<a class="caret" type="button" data-toggle="collapse" data-target="#weekly" aria-expanded="false" aria-controls="weekly">
    <span><strong>"Weekly"</strong></span> 
</a>

【讨论】：