Аккордеоны, укрытые в Bootstrap

У меня есть серия укрытых аккордеонов Bootstrap и будучи должен помещать какие-то этикетки (span) между структурой панелей, происхождение не функционирует и завершение / открытие самого не удается.

Я попытался с этим рукописным шрифтом, но это не получаю. Какая-то подсказка?

$('#' + parentId + ' .collapse').on('show.bs.collapse', function (e) {            
    var all = $('#' + parentId).find('.collapse');
    var actives = $('#' + parentId).find('.in, .collapsing');
    all.each(function (index, element) {
      $(element).collapse('hide');
    })
    actives.each(function (index, element) {                
      $(element).collapse('show');                
    })
})    
3
задан 16.01.2017, 13:42
0 ответов

В прошлом я встретился со сходной проблемой для Веба работы. Причина - код Bootstrap в себе, который не разработан, чтобы иметь аккордеоны внутри аккордеонов. Позволь, чтобы он посмотрел посмотрим, я нахожу решение, которое я сделал, и помещаю это тебе где-то здесь. Кажется, что проблема, которая была в предыдущих версиях, уже не. Я могу поместить несколько укрытых аккордеонов, которые функционируют без проблем и без необходимости какого-либо добавочного JS.

Это вопрос убеждения, которого IDs и признаки data-* они правильны, возможно, что от тебя убежал какой-либо и поэтому не удается. И специально ты должен обращать внимание для того, чтобы:

  • у внутренних аккордеонов была собственная идентификация и не будьте тот же самый, что идентификация какого-либо другого аккордеона.
  • у заголовков панелей аккордеона была собственная идентификация и не будьте тот же самый, что идентификация другого заголовка.
  • у панелей, которые разрушаются, была собственная идентификация и не будьте тот же самый, что идентификация другой панели.
  • data-parent ссылки в заголовке аккордеона это идентификация аккордеона, который содержит их прямо.
  • идентификация панели, которая разрушается, совпадает со стоимостью href ссылки заголовка, ассоциируемого с этой панелью.

Первые три точки существенные, не только для функционирования аккордеона в себе, но также потому что действительный HTML не позволяет несколько элементов с той же идентификацией.

Здесь я оставляю тебе пример функционируя без происшествий и без необходимости добавлять язык сценариев JavaScript, чтобы контролировать, когда он открывает / закрывает себе суб-аккордеон:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        <div class="panel-group" id="sub-accordion" role="tablist" aria-multiselectable="true">
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="subHeadingOne">
              <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#sub-accordion" href="#collapseSubOne" aria-expanded="true" aria-controls="collapseSubOne">
                  Collapsible Sub-Group Item #1
                </a>
              </h4>
            </div>
            <div id="collapseSubOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="subHeadingOne">
              <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="subHeadingTwo">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#sub-accordion" href="#collapseSubTwo" aria-expanded="false" aria-controls="collapseSubTwo">
                  Collapsible Sub-Group Item #2
                </a>
              </h4>
            </div>
            <div id="collapseSubTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSubTwo">
              <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>
2
ответ дан 03.12.2019, 17:40
  • 1
    Большое спасибо Альваро. Я протестирую с версией 3.3.7 и пересматривать хорошо все то, что ты комментируешь посмотрим, переместили что-то меня. –  16.01.2017, 14:57

Теги

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