使用Bootstrap收合类别不适用于多个div标签

Question

I have a list of item A, B, C, D, E. Each item you click on one of these list items there is a bootstrap class 'collapse' which shows a div with text in it. 我有一个项A，B，C，D，E的列表。单击这些列表项之一时，每个项都有一个引导类“ collapse”，其中显示了一个带文本的div。 This all works ok. 一切正常。 However, you have to click the list item again to collapse the div with the text in it. 但是，您必须再次单击列表项以折叠包含文本的div。

I am trying to make sure when a list item is clicked on, all other openend divs are closed immediately. 我试图确保当单击列表项时，所有其他openend div立即关闭。

I found something which mentions to use 'data-parent' but as seen in the snippet below this does not work. 我发现了一些提到要使用“数据父级”的内容，但是如下面的代码片段所示，这是行不通的。 To see the problem view the snippet and expand snippet. 要查看问题，请查看代码段并展开代码段。

To replicate my problem these are the steps: 要复制我的问题，请执行以下步骤：

Click item A (you will see text appear 'A' underneath) 点击项目A（您会看到文本显示在下方“ A”）
Click item B (you will see text 'A' still appear as well as 'B') 点击项目B（您会看到文本“ A”和“ B”一样出现）
Click item C (you will see text 'A','B''C') 单击项目C（您将看到文本“ A”，“ B” C”）
Click item A (you will now see 'B','C') but A has now collapsed 点击项目A（您现在将看到“ B”，“ C”），但A现在已经合拢

I am trying to make sure you only see the text related to the ID of the div you clicked on. 我试图确保您只看到与您单击的div的ID相关的文本。

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> </head> <body> <!-- Start Restaurant Menu --> <section id="mu-restaurant-menu"> <div class="container"> <div id="menuGroup"> <div class="panel"> <div class="row"> <div class="col-md-12"> <div class="mu-restaurant-menu-area"> <div class="mu-title"> <p>&nbsp;</p> <h2>LIST ITEM</h2> </div> <div class="row"> <div class="col-md-12"> <div class="mu-counter-area"> <ul class="mu-counter-nav"> <li class="col-md-2 col-sm-3 col-xs-12"> <div class="mu-single-counter" data-toggle="collapse" href="#collapseA" aria-expanded="false" data-parent="#menuGroup" aria-controls="collapseFood"> <span>A</span> </div> </li> <li class="col-md-2 col-sm-3 col-xs-12"> <div class="mu-single-counter" data-toggle="collapse" href="#collapseB" aria-expanded="false" data-parent="#menuGroup" aria-controls="collapseVegan"> <span>B</span> </div> </li> <li class="col-md-2 col-sm-3 col-xs-12"> <div class="mu-single-counter" data-toggle="collapse" href="#collapseC" aria-expanded="false" data-parent="#menuGroup" aria-controls="collapseJain"> <span>C</span> </div> </li> <li class="col-md-2 col-sm-6 col-xs-12"> <div class="mu-single-counter" data-toggle="collapse" href="#collapseD" aria-expanded="false" data-parent="#menuGroup" aria-controls="collapseLunch"> <span>D</span> </div> </li> <li class="col-md-2 col-sm-3 col-xs-12"> <div class="mu-single-counter" data-toggle="collapse" href="#collapseE" aria-expanded="false" data-parent="#menuGroup" aria-controls="collapseCocktail"> <span>E</span> </div> </li> </ul> </div> </div> </div> <div class="mu-restaurant-menu-content"> <div class="row visible-lg visible-md visible-sm visible-xs collapsable-content"> <div class="container"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="main-menu-box"> <hr> <div class="collapse" id="collapseA" aria-expanded="true" > <div class="intro"> A </div> <hr> </div> <div class="collapse" id="collapseB" aria-expanded="true" > <div class="intro"> B </div> <hr> </div> <div class="collapse" id="collapseC" aria-expanded="true" > <div class="intro"> C </div> <hr> </div> <div class="collapse" id="collapseD" aria-expanded="true" > <div class="intro"> D </div> <hr> </div> <div class="collapse" id="collapseE" aria-expanded="true" > <div class="intro"> E </div> <hr> </div> </div> </div> </div> <hr> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </section> <!-- End Restaurant Menu --> </body> </html>

Answer 1

You can do this with jquery like, 您可以使用jQuery这样，

<script type="text/javascript">
  $(document).ready(function(){
    $('[data-toggle="collapse"]').click(function(event) {
        if ($('.collapse.in').length > 0) {
            $('.collapse.in').collapse('hide')
        }
    });
  })
</script>

On data-toggle="collapse" click, means on your list items click, all the div's which are opened (have the .in class with them) are close with the collapse function . 在data-toggle="collapse"单击上，意味着在列表项上单击，所有打开的div（带有.in类）都通过折叠功能关闭。

 <!DOCTYPE html> <html> <head> <meta content="width=device-width, initial-scale=1" name="viewport"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> </script> </link> </meta> </head> <body> <!-- Start Restaurant Menu --> <section id="mu-restaurant-menu"> <div class="container"> <div id="menuGroup"> <div class="panel"> <div class="row"> <div class="col-md-12"> <div class="mu-restaurant-menu-area"> <div class="mu-title"> <p> </p> <h2> LIST ITEM </h2> </div> <div class="row"> <div class="col-md-12"> <div class="mu-counter-area"> <ul class="mu-counter-nav"> <li class="col-md-2 col-sm-3 col-xs-12"> <div aria-controls="collapseFood" aria-expanded="false" class="mu-single-counter" data-parent="#menuGroup" data-toggle="collapse" href="#collapseA"> <span> A </span> </div> </li> <li class="col-md-2 col-sm-3 col-xs-12"> <div aria-controls="collapseVegan" aria-expanded="false" class="mu-single-counter" data-parent="#menuGroup" data-toggle="collapse" href="#collapseB"> <span> B </span> </div> </li> <li class="col-md-2 col-sm-3 col-xs-12"> <div aria-controls="collapseJain" aria-expanded="false" class="mu-single-counter" data-parent="#menuGroup" data-toggle="collapse" href="#collapseC"> <span> C </span> </div> </li> <li class="col-md-2 col-sm-6 col-xs-12"> <div aria-controls="collapseLunch" aria-expanded="false" class="mu-single-counter" data-parent="#menuGroup" data-toggle="collapse" href="#collapseD"> <span> D </span> </div> </li> <li class="col-md-2 col-sm-3 col-xs-12"> <div aria-controls="collapseCocktail" aria-expanded="false" class="mu-single-counter" data-parent="#menuGroup" data-toggle="collapse" href="#collapseE"> <span> E </span> </div> </li> </ul> </div> </div> </div> <div class="mu-restaurant-menu-content"> <div class="row visible-lg visible-md visible-sm visible-xs collapsable-content"> <div class="container"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="main-menu-box"> <hr> <div class="collapse" id="collapseA"> <div class="intro"> A </div> <hr> </hr> </div> <div aria-expanded="true" class="collapse" id="collapseB"> <div class="intro"> B </div> <hr> </hr> </div> <div aria-expanded="true" class="collapse" id="collapseC"> <div class="intro"> C </div> <hr> </hr> </div> <div aria-expanded="true" class="collapse" id="collapseD"> <div class="intro"> D </div> <hr> </hr> </div> <div aria-expanded="true" class="collapse" id="collapseE"> <div class="intro"> E </div> <hr> </hr> </div> </hr> </div> </div> </div> <hr> </hr> </div> </div> </div> </div> </div> </div> </div> </div> </section> </body> </html> <!-- End Restaurant Menu --> <script type="text/javascript"> $(document).ready(function(){ $('[data-toggle="collapse"]').click(function(event) { if ($('.collapse.in').length > 0) { $('.collapse.in').collapse('hide') } }); }) </script>

使用Bootstrap收合类别不适用于多个div标签

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-02-06 19:38:50

使用Bootstrap收合类别不适用于多个div标签

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-02-06 19:38:50

解决方案1
1 已采纳 2019-02-06 19:38:50