【问题标题】：Menu buttons with accordion effects具有手风琴效果的菜单按钮
【发布时间】：2014-09-01 18:56:40
【问题描述】：

我正在尝试创建一个手风琴按钮 (Bootply)。

我有一个侧面的按钮菜单，可以触发侧面的信息。我想制作信息手风琴，以便一次只显示 1 行信息。

我该怎么做？

<div class="col-sm-2 row side">
    <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#f1" data-parent="#accordion">Farm Fresh Produce</button>
    <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#f2" data-parent="#accordion">Building 1</button>
    <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#f3" data-parent="#accordion">Building 2</button>
</div>

<section class="col-sm-9 col-sm-offset-1">
    <div class="row collapse" id="f1">
        <p>Stuff 1</p>
    </div>
    <div class="row collapse " id="f2">
        <p>Stuff 2</p>
    </div>
    <div class="row collapse " id="f3">
        <p>Stuff 3</p>
    </div>
</section>

【问题讨论】：

标签： html css twitter-bootstrap button accordion

【解决方案1】：

试试这个：

DEMO

<div class="col-sm-2 row side">
    <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#f1" data-parent="#accordion">Farm Fresh Produce</button>
    <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#f2" data-parent="#accordion">Building 1</button>
    <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#f3" data-parent="#accordion">Building 2</button>
    <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#f4" data-parent="#accordion">Building 3</button>
    <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#f5" data-parent="#accordion">Building 4</button>
    <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#f6" data-parent="#accordion">North Street of Shops</button>
    <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#f7" data-parent="#accordion">South Street of Shops</button>
    <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#f8" data-parent="#accordion">Center Street of Shops</button>
    <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#f9" data-parent="#accordion">Open Air Market</button>
</div>

<section class="col-sm-9 col-sm-offset-1">
    <div class="panel-group" id="accordion">
        <div class="panel">
            <div class="row panel-collapse collapse" id="f1">
                <p>Stuff 1</p>
            </div>
        </div>
        <div class="panel">
            <div class="row panel-collapse collapse " id="f2">
                <p>Stuff 2</p>
            </div>
        </div>
        <div class="panel">
            <div class="row panel-collapse collapse " id="f3">
                <p>Stuff 3</p>
            </div>
        </div>
        <div class="panel">
            <div class="row panel-collapse collapse " id="f4">
                <p>Stuff 4</p>
            </div>
        </div>
        <div class="panel">
            <div class="row panel-collapse collapse " id="f5">
                <p>Stuff 5</p>
            </div>
        </div>
        <div class="panel">
            <div class="row panel-collapse collapse " id="f6">
                <p>Stuff 6</p>
            </div>
        </div>
        <div class="panel">
            <div class="row panel-collapse collapse " id="f7">
                <p>Stuff 7</p>
            </div>
        </div>
        <div class="panel">
            <div class="row panel-collapse collapse " id="f8">
                <p>Stuff 8</p>
            </div>
        </div>
        <div class="panel">
            <div class="row panel-collapse collapse " id="f9">
                <p>Stuff 9</p>
            </div>
        </div>
    </div>
</section>

【讨论】：

【解决方案2】：

查看Bootstrap的文档

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#f1">Farm Fresh Produce</a>
      </h4>
    </div>
    <div id="f1" class="panel-collapse collapse">
      <div class="panel-body">
            Stuff 1
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#f2">Building 1</a>
      </h4>
    </div>
    <div id="f2" class="panel-collapse collapse">
      <div class="panel-body">
            Stuff 2
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#f3">Building 2</a>
      </h4>
    </div>
    <div id="f3" class="panel-collapse collapse">
      <div class="panel-body">
            Stuff 1
      </div>
    </div>
  </div>  
</div>

【讨论】：

不是解决方案。 Data-parent 选项仅适用于面板类。我的按钮位于面板类之外。
` $(document).ready(function() { $('.accordion').click(function() { for (var i = 0; i > 9; i++) { $( '#f' + i).collapse()(); console.log('#f' + i); } $($(this).data('target')).collapse(); }); } );` 这也不起作用