Bootstrap Accordion: субколлапс должен закрыться при закрытии суперколлапса - PullRequest
Новая
       36

Bootstrap Accordion: субколлапс должен закрыться при закрытии суперколлапса

0 голосов
/ 12 марта 2019 
<div id="accordion">
    <a role="button" data-parent="#accordion" href="#supercollapse1"> ITEM1 </a>
    <div id="supercollapse1">
            <a role="button" data-toggle="collapse" href="#subcollapse1" onclick=updateContent()> SUBITEM1 </a>
            <div id="subcollapse1">
                CONTENT
            </div>
    </div>
    <a role="button" data-parent="#accordion" href="#superollapse2"> ITEM2 </a>
    <div id="supercollapse2">
            <a role="button" data-toggle="collapse" href="#subcollapse2" onclick=updateContent()> SUBITEM2 </a>
            <div id="subcollapse2">
                CONTENT
            </div>
    </div>
</div>

Что происходит Когда я открываю supercollapse1, затем subcollapse1, а затем supercollapse2, supercollapse1 закрывается вместе с subcollapse1, а supercollapse2 открывается.Затем я открываю supercollapse1 - supercollapse2 закрывается и supercollapse1 вместе с subcollapse1 открывает.

Чего я хочу достичь Когда supercollapse1 и subcollapse1 открыты и я открываю supercollapse2, supercollapse1 закрывается вместе с subcollapse1, так что subcollapse1 не отображается при повторном открытии supercollapse1.

Мотив Все вложенные коллапсы совместно используют один элемент содержимого, который создается при каждом открытии.Поэтому, когда я уже открыл subcollapse1, откройте subcollapse2 и вернитесь к subcollapse1 - он уже открыт и контент не генерируется.

Пытался быть максимально понятным.Без обид за пример с псевдокодом.

Приветствия

1 Ответ

0 голосов
/ 12 марта 2019

Если я правильно понял, закрытие аккордеона (ов) level1 должно закрыть аккордеон (ы) level2, находящиеся внутри аккордеона (ов) level1

Проверьте эту скрипку: https://jsfiddle.net/459nzh32/

Хитрость заключается в том, чтобы прослушать событие hide аккордеона уровня 1, затем найти его потомков и закрыть их, вот пример с jquery: 

$('.level1').on('hidden.bs.collapse', function () {
  $(this).find('.level2').collapse('hide');
});
...