如果单击可折叠元素，折叠所有其他（可折叠）已打开的元素 - 引导 [英] If a collapsible element is clicked, collapse all other (collapsible) already opened elements - Bootstrap

问题描述

我目前在我的个人网站上工作，并且遇到以下问题：

在我的网站上，我想使用可折叠的主菜单应该像默认的Bootstrap Accordion一样。我的主导航菜单是未排序的列表，可以折叠。每个< li> 元素都有 data-toggle =collapse属性和嵌套< div> 折叠类。这工作正常。

问题是，当打开另一个菜单点时，菜单点不会关闭。由于HTML结构，我有设计原因和一些其他功能，我不能使用Bootstrap默认的Accordion功能。

在另一部分我已成功使用Accordion功能的网站。在那里，我可以为Bootstrap Accordion提供必要的HTML结构，它看起来像这样（示例代码来自我网页上的特定部分）：

 < div id =cases-list-elements-groupclass =** panel-group **> 
 
< li class =** panel ** li-main-style ul-style> 
 
< a class =nav-scroll list-case-stylehref =＃case-details-1
 data-toggle =collapse** data-parent = ＃情况下列表元素组 **指
案例1详情< / a> 
 
< div id =case-details-1class =collapse case-details> 
< div class =container container-cases> 
  

上面的例子工作。所以我知道如何使用Bootstrap的默认Accordion。正如前面所解释的，我的问题是，我的主菜单中没有这个HTML结构：

• panel-group >
  面板
  
  data-parent =＃面板组编号

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

我知道我需要用一些自定义JavaScript来做到这一点。

解决方案

我知道您搜索了答案并找到了一些jQuery示例，但你有没有试过这种方式？

基本上我所做的只是在每个列表项中隐藏一个列表。如果您打算制作手风琴列表项链接，只需在它们周围添加一个 href 标签即可。我确信这段代码可以缩短，但这里是jQuery的一半：

  $（'＃first'）。hide （）; 
 $（'＃second'）。hide（）; 
 $（'＃third'）。hide（）; 
 $（'＃fourth'）。hide（）; 
 $ b $（'＃colors'）。click（function（）{
 $（'＃first'）。slideToggle（）; 
 $（'＃second：visible' ）.toggle（）; 
 $（'＃third：visible'）。toggle（）; 
 $（'＃fourth：visible'）。toggle（）; 
}）
 $ b $（'＃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

I am working at the moment on my personal website and I have the following issue:

On my website I would like to use a collapsible "main menu" which should acts like the default Bootstrap Accordion. My main navigation menu is an unsorted list, which can collapse. Each <li> element has the data-toggle="collapse" attribute and the nested <div> the collapse class. This works fine.

The problem is, that the menu points does not get closed when another menu point is opened. Because of the HTML structure, which I have for design reasons and some other features I need, I am not able to use the Bootstrap default Accordion feature.

In another part on the website I am successfully using already the Accordion feature. There I can have the necessary HTML structure for the Bootstrap Accordion which looks like this (example code from this specific part on my webpage):

<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"> 

The example from above works. So I know how to use the default Accordion from Bootstrap. My problem is, as explained before, I can not have this HTML structure for my main menu:

• panel-group
  panel
  data-parent="#id-of-the-panel-group"

So I need a workaround, to close the already opened menu point, after another is expanded. I have searched for hours and found some JavaScript (jQuery) examples which should close the already opened element. Unfortunately no one of the examples I have found helped me to solve my problem. They were not detailed enough for me to understand the logic behind or didn't work at all (yes, didn't worked as well in the provided JS Fiddle examples)

I know I need to do this with some custom JavaScript. After hours of trying I thought, probably someone here can advise.

解决方案

I know you searched for answers and found some jQuery examples, but have you tried it this way?

Basically what I've done is just hidden a list in each list item. If you intend to make the accordion list items links as well, just add an href tag around them. I'm sure this code could be shortened but here's the jQuery half of it:

$('#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();
})

And here's the full thing JSFIDDLE

这篇关于如果单击可折叠元素，折叠所有其他（可折叠）已打开的元素 - 引导的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！