Как заставить закрывающуюся панель аккордеона бутстрапа закрываться при открытии другой?

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

<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 с идентификатором панели, чтобы заставить это работать, но я не уверен, как использовать его с динамическими индексами $, которые я использую.

Это похоже на применение id = "accordion1_{{subdivIndex}}" как к родительскому элементу, так и к первой панели. Поскольку вам нужно настроить этот идентификатор с помощью data-parent, чтобы создать желаемое поведение, дублирующиеся идентификаторы, вероятно, являются причиной вашей проблемы.

— 09.04.2019 18:51

Спасибо за ваш ответ. Я сделал то, что вы сказали, удалил повторяющийся идентификатор из родительского элемента, а также заметил, что по ошибке отсутствует символ «#», поэтому добавил его обратно. Но, к сожалению, он все тот же. Знаете ли вы, что еще может быть причиной этой проблемы?

— 09.04.2019 19:33

В этот момент я бы сказал: покажите нам полуфункциональный код. То, что у вас есть на StackOverflow, выглядит так, как будто у вас есть несколько вложенных меню-аккордеонов.

— 09.04.2019 21:47

Я воссоздал другую версию здесь: plnkr.co/edit/VDn4Kprz6hd9pEaGHBkk?p=предварительный просмотр на этот раз внешний аккордеон (провинции) работает нормально, а внутренний вложенный аккордеон (районы) - нет. Я думаю, что это как-то связано с $index. Возможно, мне придется написать какой-нибудь javascript, чтобы внутренний аккордеон работал как внешний.

— 10.04.2019 13:11

angularjs twitter-bootstrap

09.04.2019 16:48

Знаете ли вы, что директивы являются одной из самых мощных и универсальных функций Angular?

Директивы позволяют расширять HTML новыми элементами и атрибутами и даже создавать собственные структурные директивы для манипулирования DOM. С...

Разница между Angular и React

React и AngularJS - это два самых популярных фреймворка для веб-разработки. Оба фреймворка имеют свои уникальные особенности и преимущества, которые...

1 666

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

10.04.2019 14:09

Другие вопросы по теме

Доступны ли стили контура начальной загрузки по умолчанию?

Есть ли способ стилизовать определенные данные, полученные из MySQL?

Панель начальной загрузки не открывается после краха

Начальная загрузка. Сделать некоторые элементы контейнера «фиксированными»

Получить модальные начальные данные Bootstrap-* при закрытии

Как уменьшить размер jumbotron, который используется в нижнем колонтитуле?

Модальное положение по центру с плавающим внешним полем

Сделать помощники по тегам горизонтальными, а не вертикальными

Загадочное отступы слева направо на устройстве шириной 320 пикселей

Как добавить промежутки между изображениями в слайдере карусели или убрать сбой при слайде

Как заставить закрывающуюся панель аккордеона бутстрапа закрываться при открытии другой?

Ответы 1

Другие вопросы по теме

Похожие вопросы