Как заставить загрузочную панель свернуть гармошку при открытии другой? - PullRequest
Новая
       6

Как заставить загрузочную панель свернуть гармошку при открытии другой?

0 голосов
/ 09 апреля 2019

Это мой аккордеон: 

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

В настоящее время он не работает так, как обычный аккордеон с начальной загрузкой, каждая панель 'провинция' остается открытой, пока вы не нажмете ее снова.Он не закрывается автоматически при открытии другой панели.Кроме того, внутренние панели (районы) не закрываются, когда родительская панель (провинция) закрыта.

Я видел, как люди используют data-target с идентификатором панели, чтобы сделать эту работу, но я не уверенкак использовать его с динамическими индексами $, которые я использую.

1 Ответ

0 голосов
/ 10 апреля 2019

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...