Программно переключать компонент сворачивания Bootstrap 5
Я использую "коллапс" boostrap 5, используя подход атрибутов данных. Он работает так, как ожидалось. Я могу нажать кнопку, чтобы свернуть/развернуть складные элементы.
Состояние документов Я могу переключать состояние вручную, например так:
let element = document.querySelector('#my-collapse');
bootstrap.Collapse.getInstance(element).toggle();
Однако это не удается, так как getInstance возвращает null.
Странно, если я нажму кнопку свернуть, а затем использую этот код, он работает.
Как убедиться, что код работает без предварительной «заправки» компонента свертывания?
@DimitrisMaragkos Спасибо! Это не проблема, я могу найти элемент без проблем (element не равно null), но getInstance возвращает null. Кроме того, этот код работает как есть, когда я вручную нажимаю кнопку свернуть. Странный.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я думаю, что при использовании атрибутов данных компонент начальной загрузки создается только по запросу, то есть при первом нажатии кнопки свертывания. Это объясняет поведение, которое я отметил выше.
Таким образом, решение состоит в том, чтобы использовать вместо этого getOrCreateInstance:
let element = document.querySelector('#my-collapse');
bootstrap.Collapse.getOrCreateInstance(element).toggle();
Приведенный ниже код гарантирует, что экземпляр сворачивания не равен нулю:
let element = document.querySelector('#my-collapse');
// try to get collapse instance
let bsCollapse = bootstrap.Collapse.getInstance(element);
// if the instance is not yet initialized then create new collapse
if (bsCollapse === null) {
bsCollapse = new bootstrap.Collapse(element, {
toggle: false // this parameter is important!
})
}
bsCollapse.show();
Спасибо. Однако это излишне сложно — getOrCreateInstance делает все это в одной строке. Его возвращаемое значение может быть нулевым только в том случае, если селектор недействителен, и в этом случае у вас большие проблемы (и вопрос касается создания компонента с помощью атрибутов данных, что означает, что у вас уже есть действительный селектор).
@lonix - вы могли бы подумать, что getOrCreateInstance достаточно, но в моем случае это было не так. Этот bootstrap.Collapse.getOrCreateInstance('#my-collapse').show(); свернет уже открытый Collapsable вместо того, чтобы показать, что пользователь еще не взаимодействовал с ним. Единственное решение для меня - это код выше.
Если вы считаете, что это ошибка, я предлагаю вам открыть проблему в репо и отправить мне ссылку, чтобы я мог проголосовать за нее.
Попробуйте выбрать элемент с помощью
idвместо использования классаcollapse. Например:document.querySelector('#my-collapse-element');