Question

这是我的手风琴：

<div class="subdiv-wrapper">
    <div class="panel-group" id="accordion1_{{subdivIndex}}" ng-repeat="admin in subdivisions" ng-init="subdivIndex = $index">
        <div class="panel panel-default" id="accordion1_{{subdivIndex}}" ng-repeat="admin2 in admin.province">

            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="accordion1_{{subdivIndex}}" href="#collapse-1{{subdivIndex}}" aria-expanded="false" ><span class="span-left">{{ admin2.name }}</span><span class="span-right">{{ admin2.population }}</span></a>
                </h4>
            </div>

            <div id="collapse-1{{subdivIndex}}" class="panel-collapse collapse">
                <div class="panel-body">
                  <h3>districts</h3>
                    <div class="panel-group" id="accordion2_{{subdivIndex}}">

                        <!-- districts -->
                        <div class="panel panel-default" ng-repeat="admin3 in admin.district" ng-init="subdivIndex2 = $index">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data-parent="#accordion2_{{subdivIndex}}" href="#collapse-1-1_{{subdivIndex}}_{{subdivIndex2}}"><span class="span-left">{{ admin3.name }}</span><span class="span-right" aria-expanded="false">{{ admin3.population }}</span></a> 
                                </h4>
                            </div>
                            <!-- communes -->                           
                            <div id="collapse-1-1_{{subdivIndex}}_{{subdivIndex2}}" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <!-- display 'communes' title here -->
                                    <div ng-repeat="admin4 in admin3.commune"><span class="span-left">{{ admin4.name }}</span><span class="span-right">{{ admin4.population }}</span></div>
                                </div>
                            </div>
                        </div>                         
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

目前，它不像通常的自举式手风琴那样起作用，每个“省”面板保持打开状态，直到您再次单击它为止。打开另一个面板时，它不会自动关闭。同样，当父面板（省）关闭时，内部面板（区域）也不会关闭。

我已经看到人们使用带有面板ID的data-target来完成这项工作，但是我不确定如何将其与我正在使用的动态$ indexes一起使用。

Answer 1

https://plnkr.co/edit/SgOFaUNw7EQFxYz3RWPB?p=preview

#accordion-wrapper {
	width: 400px; position: absolute; left: 50%; margin-left: -200px; top: 20%;
}

.panel {
	padding: 0;
	margin: 0;
}


.panel-heading {
	border-radius: 0px;
	padding: 0;
	margin: 0;
}

.panel-title {
	width: 100%;
	text-decoration: none;
	border: none;
	background: #9bdbe6;
}
.panel-title:focus {
	outline: 0;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

    <link rel="stylesheet" type="text/css" href="style.css">

    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js'></script>

  </head>
  <body>
  
    <div ng-app="algeriaApp" ng-controller="mainCtrl">


      <div id="accordion-wrapper">

        <div class="panel-group" id="accordion">
          <div class="panel" ng-repeat="sub in subdivisions" ng-init="provIndex = $index" >


            <!--  Province Heading -->
            <div class="panel-heading" ng-repeat="prov in sub.province" >

              <button class="panel-title" data-toggle="collapse" ng-click="closeinner($event)" data-target="#sliding-content_{{provIndex}}" data-parent="#accordion" aria-expanded="false">{{prov.name}}</button>
              
            </div> <!-- end panel-heading -->

        <!-- Province Sliding content -->

            <div id="sliding-content_{{provIndex}}" class="panel-collapse collapse" >
                
               <div class="panel-body"> 

                <!-- ========== INNER ACCORDION ========== -->
                <div class="panel-group" id="inner-accordion">
                  <div class="panel" ng-repeat="dist in sub.district" ng-init="distIndex = $index" >

                    <!-- District Heading (inner accordion) -->

                    <div class="panel-heading">

                      <button class="panel-title" data-toggle="collapse" ng-click="clickcollapse($event)" data-target="#sliding-content_{{provIndex}}_{{distIndex}}" data-parent="inner_accordion" aria-expanded="false" style="background:#d0dae0">{{dist.name}}</button>

                    </div> <!-- end panel-heading -->

                    <!-- District Sliding content (inner accordion ) communes list -->

                    <div id="sliding-content_{{provIndex}}_{{distIndex}}" class="panel-collapse collapse" >
                      <div class="panel-body"> 

                        <p>placeholder</p>
                        <!-- list of communes will be displayed here -->

                      </div>
                    </div>

                  </div> <!-- end panel (individual districts)-->
                </div> <!-- end panel-group / inner accordion -->


               </div> <!-- end panel-body -->

            </div> <!-- end province slidig content -->


          
          </div> <!-- end panel (individual provinces) -->
        </div> <!-- end panel-group -->


      </div> <!-- end wrapper -->

    </div> <!-- end algeriaApp -->

<script type="text/javascript">

  var algeriaApp = angular.module('algeriaApp', []);

  algeriaApp.controller('mainCtrl', function($scope) {
  
    $scope.subdivisions = [
       //start province: adrar
       { "province": [{"name":"Adrar","population":"123"}], "district": [
          
          { "name": "Adrar1", "population":"1234"},
          { "name": "Adrar2", "population":"1234"},
          { "name": "Adrar3", "population":"1234"}

        ] }, //end province: adrar


       //start province: algiers
       { "province": [{"name":"Algiers","population":"123"}], "district": [
          
          { "name": "Algiers1", "population":"1234"},
          { "name": "Algiers2", "population":"1234"},
          { "name": "Algiers3", "population":"1234"}

        ] }, //end province: algiers

       //start province: algiers
       { "province": [{"name":"Chlef","population":"123"}], "district": [
          
          { "name": "Chlef1", "population":"1234"},
          { "name": "Chlef2", "population":"1234"},
          { "name": "Chlef3", "population":"1234"}

        ] } //end province: algiers

     ]; // end subdivisions 


      $scope.clickcollapse = function(e) {
        $('#inner-accordion .collapse.in').collapse('hide')
      };

      $scope.closeinner = function(e) {
        $('#inner-accordion .collapse.in').collapse('hide')
      }

  });

</script>

  </body>
</html>

当另一个打开时，如何使bootstrap折叠手风琴面板关闭？

1 个答案: