Question

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

有没有办法做到这一点？

Answer 1

我可以想到2个bootstrap组件来实现它，标签＆amp;崩溃。

Answer 2

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

<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 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已经提供的内容。

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

jQuery手风琴就像制表符一样

3 个答案: