jquery - 使用 Bootstrap 创建在点击时展开的垂直下拉菜单-6ren

jquery - 使用 Bootstrap 创建在点击时展开的垂直下拉菜单

转载作者：行者123 更新时间：2023-11-28 11:35:19

25

4

我正在尝试创建一个在点击时展开的垂直菜单。单击每个元素时，应展开并显示 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

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

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

为了避免问题因为“过于宽泛”而结束，我会让我的问题更精确:

如何在仅占据屏幕宽度一部分的主容器内显示内容，而不是菜单占据整个屏幕宽度？
如何显示嵌套的<li>作为一个类似盒子的 div(可点击)？

我对 Twitter bootstrap 完全陌生，我觉得我没有正确使用它。有人可以好心地告诉我如何真正做到这一点吗？

最佳答案

使用 Bootstrap 类“row”和“col”来控制 div 的宽度。
在可折叠 Accordion 或面板周围使用容器(如井类)。
查看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>

关于jquery - 使用 Bootstrap 创建在点击时展开的垂直下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28923307/

25

4

0

文章推荐： javascript - Swiffy 透明背景不适用于 Chrome

文章推荐： javascript - JQuery 设置总数的奇数、偶数

文章推荐： css - 图片不可见

wpf - 展开/折叠WPF扩展器
如何在代码中展开/折叠WPF扩展器？我需要这样做才能在其中初始化控件。最佳答案使用IsExpanded属性，将其设置为true以使内容可见: myExpander.IsExpanded = tru
powershell - ArrayList 展开
Powershell 展开让我发疯。我有以下代码可以从交换收件人处检索电子邮件地址。我使用 ArrayList 是因为当您希望能够从数组中删除项目时，很多人都建议使用它。 $aliases = Ne
jsf - 展开/折叠数据表中的子表
是否可以展开/折叠数据表中的子表？我的子表包含与其上方行相关的信息，我想显示/隐藏图像的点击。只是想知道我会怎么做？这是我目前使用的:
javascript - 展开/折叠文本区域问题
我正在尝试创建一个可扩展的文本区域，仅当该框为空时，该区域才会折叠回其原始高度。如果它不为空，那么我希望文本区域保持扩展并根据需要增长(即，当用户输入更多文本时增长)。文本区域永远不应该隐藏输入的文本
javascript - 嵌套可排序无法正确折叠/展开
当尝试将 nestedSortable jQuery 插件与其网站上提供的示例一起使用时，该插件无法正常工作。拖放可以工作，但是当我需要折叠/展开时就会出现问题。我使用了另一个问题中建议的解决方案，
javascript - 为什么引导行不折叠/展开？
我有一个显示嵌套数据的表。数据如下所示: Objective 1 Objective 1.1 Objective 1.1.1 Objective 1.2
javascript - 展开/收缩菜单栏
我正在使用 jQuery 从屏幕左侧展开/缩回菜单栏。这是我到目前为止所拥有的: $(document).ready(function(){ $('.menu-button').on("clic
javascript - 按类别向图像添加折叠/展开
如何根据类别向页面上的图像添加隐藏/显示(折叠/展开)功能？我希望具有特定类的图像在加载时折叠，并在 JS 中定义一些任意标记(比方说， Show )，然后在扩展中具有不同的任意标记( Hide )
java - 展开/折叠树后触发事件
我需要在折叠和展开后触发事件调整大小。当我尝试使用 SWT.Collapse 和 SWT.Expand 执行此操作时，树上没有任何更改，因为它在发生之前就已触发。有什么办法吗？最佳答案尝试调用 D
scala - 展开/剥离无形余积对象
我有一个如下所示的域: package object tryme { type ALL = AlarmMessage :+: PassMessage :+: HeyMessage :+: CNil
wpf - 展开/折叠所有扩展器
我有一个扩展器列表，我想用全局切换按钮控制其展开状态(IsExpanded)，该按钮应该在展开/折叠状态之间切换。到目前为止，我得到的解决方案是通过将扩展器的 IsExpanded 状态绑定(bin
python - 展开/折叠后调整小部件的大小
我试图根据 QWidget 是否展开/折叠来自动调整其大小。我尝试了几种发布的方法here和 here . 我没有设法采用这些，以便它按照我想要的方式工作:我希望 QWidget 在展开时调整自身大小
javascript - 展开/折叠对象列表
我正在尝试显示对象模型(机器人)列表，这些模型有一个可以是另一个机器人的字段 Parent。我已经使用 Django 的 MPTT 实现了一个嵌套列表: {% load mptt_tags %}
Javascript - 展开/折叠表格行
鉴于下表/代码，我想添加两项。我不太了解 JavaScript，这段代码是另一个程序员留下的。该代码在所有其他方面都按预期工作。这是两个项目: 表格应该以折叠状态开始。所有节点都应该是崩溃到“祖 p
javascript - 展开/折叠表格行
我想要一张可以展开或折叠的表格。我的要求是当我点击表格行然后隐藏行显示或者当我点击其他表格行然后上一个打开的行隐藏或显示相对隐藏行。我发现一个 jquery jxpand 非常适合我，它显示隐藏的行但
javascript - 展开/折叠将页面带到顶部
如果当您向下滚动页面时元素展开或折叠，页面会突然重置并且焦点会移动到页面顶部。有什么方法可以防止页面移动或使其不那么突然？ $(document).ready(function () {
Android LinearLayout 展开
我正在使用以下代码来扩展特定的线性布局，并且遵循了本教程 http://gmariotti.blogspot.sg/2013/09/expand-and-collapse-animation.html
android - 使可折叠工具栏自动折叠/展开
当垂直偏移超过特定阈值时，如何使android中的可折叠工具栏自动折叠/展开？例如，如果垂直偏移超过 getScrollRange() 的半点，则可折叠工具栏应自动展开，低于该阈值时应折叠。最佳答
CSS - 展开 div
http://t-webdesign.co.uk/new/ 如何在不使用固定高度属性的情况下让灰色 div (#content_right) 扩展到与左侧 div 相同的大小？谢谢最佳答案你可能
javascript - 展开/折叠摘录和内容
设置一个简单的 WordPress 博客，仅包含一个页面，即博客存档。但我遇到了一个问题，我想要切换摘录和内容显示更多/显示更少的功能，以便访问者可以轻松浏览同一页面上的帖子，而无需页面重新加载或被发

首页

博学

6Ren·AI

商城

jquery - 使用 Bootstrap 创建在点击时展开的垂直下拉菜单