如果单击了可折叠元素,则折叠所有其他(可折叠)已打开的元素 - Bootstrap

时间:2016-04-01 13:00:59

标签: javascript jquery html css twitter-bootstrap

我目前正在我的个人网站上工作,我有以下问题:

在我的网站上,我想使用一个可折叠的“主菜单”,它应该像默认的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结构:

  • 面板组
    面板
    数据父=“#标识的最面板一组”

所以我需要一个解决方法,关闭已经打开的菜单点,然后再展开。我搜索了几个小时,发现了一些JavaScript(jQuery)示例,它们应该关闭已经打开的元素。不幸的是,我找到的任何一个例子都没有帮助我解决我的问题。它们不够详细,我无法理解背后的逻辑或者根本没有工作(是的,在提供的JS Fiddle示例中效果不佳)

我知道我需要使用一些自定义JavaScript来执行此操作。经过几个小时的尝试,我想,也许这里有人可以提供建议。

1 个答案:

答案 0 :(得分:1)

我知道你搜索了答案并找到了一些jQuery示例,但你是否尝试过这种方式?

基本上我所做的只是在每个列表项中隐藏一个列表。如果您打算制作手风琴列表项链接,只需在它们周围添加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