Question

我正在尝试创建一个展开点击的垂直菜单。点击后，每个项目都应展开并显示3个链接。

这是初始布局：

点击所有项目后

这是我到目前为止的代码：

<!DOCTYPE html>
    <body>
        <div class="accordion" id="leftMenu">
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-parent="#leftMenu"
                    data-toggle="collapse" href="#collapseTwo"><i class=
                    "icon-th"></i> Item 1</a>
                </div>

                <div class="accordion-body collapse" id="collapseTwo" style=
                "height: 0px;">
                    <div class="accordion-inner">
                        <ul>
                            <li>This is one</li>
                            <li>This is two</li>
                            <li>This is Three</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-parent="#leftMenu"
                    data-toggle="collapse" href="#collapseThree"><i class=
                    "icon-th-list"></i> Item 2</a>
                </div>

                <div class="accordion-body collapse" id="collapseThree" style=
                "height: 0px;">
                    <div class="accordion-inner">
                        <ul>
                            <li>This is one</li>
                            <li>This is two</li>
                            <li>This is Three</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-parent="#leftMenu"
                    data-toggle="collapse" href="#collapseFour"><i class=
                    "icon-list-alt"></i> Item 3</a>
                </div>

                <div class="accordion-body collapse" id="collapseFour" style=
                "height: 0px;">
                    <div class="accordion-inner">
                        <ul>
                            <li>This is one</li>
                            <li>This is two</li>
                            <li>This is Three</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

我的点击功能扩展工作正常：jsFiddle Demo

问题是布局并不完全符合我的要求。如上图所示，我想要一个主容器，并在容器内显示菜单。

截至目前，它占据了整个屏幕宽度。并且子菜单项不显示为块项目。

为了避免将问题关闭为“太宽泛”，我会更加准确地提出问题：

如何显示主容器内的内容，只占用屏幕宽度的一部分，而不是占据整个屏幕宽度的菜单？
如何将嵌套<li>显示为类似方框的div（可点击）？

我对Twitter引导程序完全不熟悉，我感觉我没有正确使用它。有人可以如此友善地向我展示如何以正确的方式实现这一目标吗？

Answer 1

使用bootstrap类“row”和“col”来控制div的宽度。
在可折叠的折叠式手风琴或面板周围使用容器（如井级）。
查看this fiddle了解更多详情。这应该足以让你入门。

.well {
  background-color: #FFFFFF;
}
ul.subMenu {
  padding-left: 0px;
}
ul.subMenu li {
  list-style-type: none;
  text-align: left;
  color: #000000;
  border: 1px solid #e2e2e2;
  margin-bottom: 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-4 col-sm-4 col-xs-6">
    <div class="well">
      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingOne">
            <h4 class="panel-title">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                      Item #1
                    </a>
                  </h4>

          </div>
          <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
              <ul class="subMenu">
                <li>Item #1a</li>
                <li>Item #1b</li>
                <li>Item #1c</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingTwo">
            <h4 class="panel-title">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                      Item #2
                    </a>
                  </h4>

          </div>
          <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body">
              <ul class="subMenu">
                <li>Item #2a</li>
                <li>Item #2b</li>
                <li>Item #2c</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingThree">
            <h4 class="panel-title">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                      Item #3
                    </a>
                  </h4>

          </div>
          <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
            <div class="panel-body">
              <ul class="subMenu">
                <li>Item #3a</li>
                <li>Item #3b</li>
                <li>Item #3c</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

创建垂直下拉列表，使用Bootstrap进行单击扩展

1 个答案: