如何打开包含多个部分的Bootstrap 3 accordion菜单的正确部分？
Bootstrap 3是一个流行的前端开发框架，其中的accordion菜单是一种常见的折叠式菜单，可以展示多个部分的内容。正确打开包含多个部分的Bootstrap 3 accordion菜单的步骤如下：
- 首先，确保在HTML文件中引入了Bootstrap 3的CSS和JavaScript文件。
- 在HTML文件中创建一个包含多个部分的accordion菜单的容器。可以使用
<div>元素，并为其添加class="panel-group"属性。 - 在容器中添加多个部分，每个部分对应一个折叠项。使用
<div>元素，并为其添加class="panel panel-default"属性。 - 在每个折叠项中添加一个标题和内容。标题部分可以使用
<div>元素，并为其添加class="panel-heading"属性，同时在其中添加一个带有data-toggle="collapse"和data-parent="#accordion"属性的链接元素，用于触发折叠效果。内容部分可以使用<div>元素，并为其添加class="panel-collapse collapse"属性，同时在其中添加一个带有class="panel-body"属性的容器，用于放置具体内容。 - 根据需要，可以在标题部分添加其他元素，如图标或按钮，以增强用户体验。
以下是一个示例代码，展示了如何正确打开包含多个部分的Bootstrap 3 accordion菜单：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<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="#collapse1">Section 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
Content of section 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="#collapse2">Section 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
Content of section 2
</div>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>这样，你就可以正确打开包含多个部分的Bootstrap 3 accordion菜单了。请注意，以上示例中的链接元素的href属性值与对应的内容部分的id属性值相同，以实现折叠效果。
相关·内容
我目前正在为一个项目添加一个折叠菜单，但是我在尝试让折叠菜单展开正确的部分并根据网址突出显示当前选择时遇到了麻烦(后面的部分我只是通过使用一些JS将class="active"添加到与页面URL相匹配的条目中进行了整理我的问题是，我有两个手风琴部分，并希望在导航到页面时打开包含此条目的部分。我尝试过各种方法，但我有种感觉，我遗漏了什么。菜单<e
浏览 8提问于2016-07-27得票数 0
我对jQuery非常陌生，正在为我的侧边导航开发一个五六级的手风琴菜单。到目前为止，我从Dane Peterson @ daneomatic.com获得了大部分代码(谢谢Dane!)。但是，我被一件事卡住了：当我向下导航到，比如说，第三级，并单击链接打开链接到该级别的页面时，一旦加载了第三级页面，我如何指示我在该页面上？另外，当我加载页面时，如何保持树对该级别的打开？
我想我要问的
浏览 0提问于2009-10-22得票数 11
1回答
我有一个“菜单”btn，它可以滑动打开一个带有"accordion“菜单的div。当我为包含accordion的div添加值hide() (在JS中)或“hide”(在CSS中)时，accordion停止正常工作。当你用菜单btn打开带有折叠面板的div之后，当你点击一个折叠面板部分时，它并不能查看其中的所有内容。
我用手风琴隐藏div
浏览 2提问于2010-08-17得票数 1
我使用Bootstrap的accordion窗口小部件来包含多个表单，即每个面板包含一个表单。当选择最后一个面板时，来自其他面板的数据将被发布，这些数据将用于绘制数据图表。但是，我无法到达张贴部分，因为我不能确定当前选择了哪个面板。我知道这与active或inactive类有关，但我不认为bootstrap的accordion支持jquery accordion那样的</e
浏览 17提问于2014-07-31得票数 0
我正在尝试修改Bootstrap折叠插件，以允许我指定单击一个accordion (打开)是否应该自动关闭accordion中的其他项目(以便一次可以打开accordion中的多个项目)对于我的技术水平来说，bootstrap jQuery插件有点高级
浏览 1提问于2012-04-05得票数 62
回答已采纳
2回答
对于我的网站设计，我需要一个手风琴菜单的屏幕小于7英寸的水平平板电脑和一个正常的水平菜单的一切与内容作为一个页面的网站(所以所有的手风琴部分设置为打开)。我没有使用JQuery accordion或任何其他预制版本，因为我自己的设计中有一些视觉方面是不支持的。我正在扩展div的高度，而不是实际显示隐藏的部分，因为我有一个背景图像
浏览 1提问于2014-04-29得票数 0
我在modx和accordion中使用jquery +jquery in。我不想在顶部有一个水平菜单，在那里我可以跳到(滚动)到(打开的)部分。我该如何做到这一点。现在我的js看起来是这样的： $("#accordion").children("div").each( function() {").ajaxStop(f
浏览 0提问于2012-03-27得票数 1
回答已采纳
我想要做的是在打开的accordion标题中添加一个类，并在打开另一个标题时将其删除。--/accordion--><script src="js/jquery-1.7.1.min.js"></script>
<script src="js/bootstrap.min.js"></scrip
浏览 106提问于2012-06-07得票数 18
回答已采纳
尝试一下，我尝试了react-bootstrap，并尝试使用react-bootstrap accordion实现accordion。首先，我尝试使用ButtonToolBar，它工作得很好。的手风琴代码不起作用。它显示了内容，但不像我们在手风琴中显示的那样。key={3}> </Panel>);
Re
浏览 3提问于2014-11-19得票数 2
回答已采纳
我创建了一个bootstrap Card，里面有一个react-select，问题是当我打开react-select菜单时，这个菜单没有完全显示。这是我的问题的图片：Image import React from "react";import Row from "/selects/MonthSelect&qu
浏览 55提问于2020-08-13得票数 2
回答已采纳
2回答
我有一些帖子，这是加载在ngOnInit和行动togglePost加载选定的帖子项目。但我需要保持打开各种加载项目的帖子。<accordion-group (togglePost)="togglePost($event)"> <li *ngFor="let item of items">
浏览 2提问于2017-08-17得票数 0
2回答
没有找到角UI手风琴指令
、、、、
“控制器‘手风琴’，指令‘手风琴组’所要求的，找不到！”我下载了自定义构建版本的角度ui。我像这样把'ui.bootstrap‘注入到模块中。var app = angular.module('MenuApp', ['ngRoute', 'ui.bootstrap']);
在我的index.html中添加了以下代码来将文件加载到head部分.-0.13.1.js"></script>
浏览 2提问于2015-07-31得票数 0
回答已采纳
2回答
jquery手风琴闭题
、、、
$('#programOutlineBox table tr td').accordion({ active: false,').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({'aria-selected':'true',
浏览 11提问于2014-01-07得票数 1
回答已采纳
我正在尝试实现一个保存状态的手风琴菜单...到目前为止，我有这样的想法： $("#accordionMenu").accordion({ } });
它设置了正确的</em
浏览 0提问于2011-02-03得票数 0
我有一个导航栏，里面有两个下拉元素，由bootstrap-ui控制。<script type="text/javascript" src="lib/angular-bo
浏览 1提问于2015-05-15得票数 0
我正在开发一个使用Booststrap组件的Angular JS 1.5应用程序。我在侧边栏上有一个基于以下内容的手风琴菜单：当我打开一个菜单并选择菜单项时，页面就被加载了(为此，我使用了香草角度JS路由。如果我随后从折叠面板中打开另一个菜单，即单击菜单标题，该菜单将打开，前一个菜单会折叠，但加载的页面会发生变化。
我想要<
浏览 0提问于2016-10-03得票数 0
1回答
基本上我有一个空手风琴和一个下拉菜单。每次在下拉菜单中进行选择时，都会将其添加到手风琴上，上面有完整的.accordion-group标记，但有空的.accordion-body div。之后，我可以将一堆其他div拖放到.accordion-group中，这些div被附加到这个特定组的.accordion-body中。但是，只要我单击以展开任何给定的.accordion-group，.ui-dro
浏览 6提问于2012-09-27得票数 0
回答已采纳
2回答
我正在使用jQuery Accordion UI和一个多部分的表单(带有验证和表单插件)。每个表单都有一个常规的提交按钮和一个编辑按钮。编辑按钮将触发提交当前打开的部分，如果该部分已完成，或关闭该活动部分，如果它尚未完成。然后，accordion将打开单击编辑按钮的部分。
例如，用户填充第1部分，然后单击continue。在填写第二部分<
浏览 1提问于2011-05-02得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
