我目前正在我的个人网站上工作,但遇到以下问题:
在我的网站上,我想使用一个可折叠的“主菜单”,它应该像默认的 Bootstrap Accordion 一样工作。我的主导航菜单是一个未排序的列表,可以折叠。每个<li>
元素有 data-toggle="collapse"
属性和嵌套的 <div>
崩溃类。这很好用。
问题是,当打开另一个菜单点时,菜单点不会关闭。由于 HTML 结构(出于设计原因和我需要的其他一些功能),我无法使用 Bootstrap 默认 Accordion 功能。
在网站的另一部分,我已经成功地使用了 Accordion 功能。在那里,我可以获得 Bootstrap Accordion 所需的 HTML 结构,如下所示(我网页上此特定部分的示例代码):
<div id="cases-list-elements-group" class="**panel-group**">
<li class="**panel** li-main-style ul-style">
<a class="nav-scroll list-case-style" href="#case-details-1"
data-toggle="collapse" **data-parent="#cases-list-elements-group"**>
Case 1 Details </a>
<div id="case-details-1" class="collapse case-details">
<div class="container container-cases">
上面的例子有效。所以我知道如何使用 Bootstrap 中的默认 Accordion 。我的问题是,如前所述,我的主菜单不能使用这种 HTML 结构:
- 专家组
面板
data-parent="#id-of-the-panel-group"
所以我需要一个解决方法,关闭已经打开的菜单点,然后展开另一个。我搜索了几个小时,发现了一些应该关闭已经打开的元素的 JavaScript (jQuery) 示例。不幸的是,我发现的所有示例都没有帮助我解决问题。它们不够详细,我无法理解背后的逻辑或根本不起作用(是的,在提供的 JS Fiddle 示例中效果不佳)
我知道我需要使用一些自定义 JavaScript 来执行此操作。经过几个小时的尝试,我想,这里可能有人可以提供建议。
最佳答案
我知道您搜索过答案并找到了一些 jQuery 示例,但是您尝试过这种方法吗?
基本上我所做的只是在每个列表项中隐藏一个列表。如果您还打算制作 Accordion 列表项链接,只需在它们周围添加一个 href
标记。我确信这段代码可以缩短,但这里是 jQuery 的一半:
$('#first').hide();
$('#second').hide();
$('#third').hide();
$('#fourth').hide();
$('#colours').click(function(){
$('#first').slideToggle();
$('#second:visible').toggle();
$('#third:visible').toggle();
$('#fourth:visible').toggle();
})
$('#shapes').click(function(){
$('#second').slideToggle();
$('#first:visible').toggle();
$('#third:visible').toggle();
$('#fourth:visible').toggle();
})
$('#fruit').click(function(){
$('#third').slideToggle();
$('#first:visible').toggle();
$('#second:visible').toggle();
$('#fourth:visible').toggle();
})
$('#vehicles').click(function(){
$('#fourth').slideToggle();
$('#first:visible').toggle();
$('#second:visible').toggle();
$('#third:visible').toggle();
})
这是完整的 JSFIDDLE
关于javascript - 如果单击可折叠元素,则折叠所有其他(可折叠)已打开的元素 - Bootstrap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36357073/