像标签一样的 jQuery 手风琴

Question

我正在使用 Bootstrap 和 jQuery 手风琴。我必须使用手风琴以类似的风格制作标签。我的意思是，可点击的项目应该是内联的（如标签样式），而不是像列表（一个在另一个之下）。

有什么办法吗？

Answer 1

对于您的具体要求，我认为您需要使用 Syden 的答案，并进行一些定制。
使用引导折叠组件。

<p>
 <a class="btn btn-primary btn1" aria-expanded="false" aria-controls="collapseExample">
Link with href
  </a>
  <button class="btn btn-primary btn2" type="button" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
 </button>
   </p>
  <div class="collapse" id="collapseExample1">
 <div class="card card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
<div class="collapse" id="collapseExample2">
 <div class="card card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>

然后，使用 javascript，创建一个自定义点击功能，这样当您打开一个折叠时，它首先隐藏所有其他，然后显示您点击的那个 - 这样您就不必点击两次。

$(".btn1").on("click", function(){
$(".collapse").collapse('hide')
$("#collapseExample1").collapse('show')
});
 $(".btn2").on("click", function(){
$(".collapse").collapse('hide')
$("#collapseExample2").collapse('show')
});

注意：您需要为每个按钮添加点击功能才能使其正常工作。

Answer 2

我可以想到 2 个引导组件来实现这一点，标签和折叠。

Tags (span)

Put tags inside collapse

Answer 3

我必须使用手风琴以类似的方式制作标签。我的意思是，可点击的项目应该是内联的（如标签样式），而不是像列表（一个在另一个之下）。

如果我正确理解了这个问题，您可以通过执行以下操作来完成此操作。

将所有内容包装在 panel-group 中，如 Bootstrap 所示，只需使用 <ul> 列表和 nav nav-tabs 类作为针对 div 面板的链接。

<div class="panel-group" id="accordion" role="tablist">
  <!-- Bootstrap Nav tabs -->
  <ul class="nav nav-tabs"> 
     <li><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"></li>
     ...
  </ul>
  <!-- Bootstrap collapse -->
  <div class="panel panel-default">
     <div id="collapseOne" class="panel-collapse collapse in">
        ...
     </div>
     ...
  </div>
</div>

然后移除默认面板边框

.panel-default {
  border: 0;
}

无需添加额外的 javascript，使用 Bootstrap 已经提供的。

这是一个工作代码笔供您查看。 http://codepen.io/yongchuc/pen/YpZvOJ