Вопрос по twitter-bootstrap, twitter-bootstrap-3 – Привязка к событию Свернуть в Twitter Bootstrap 3

44

Предполагая, что у меня есть Bootstrap Collapse:


  
    
      
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      
    
    
      
        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.
      
    
  
  
    
      
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      
    
    
      
        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.
      
    
  
  
    
      
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      
    
    
      
        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.
      
    
  

С каким элементом я должен связать следующееJavaScript:

$("WhichSelectorGoesHere").on('hidden.bs.collapse', function () {})

Можно ли связать все панели по классу?

К сожалению, нет#myCollapsible в примере вдокументация.

Ваш Ответ

3   ответа
3

Bootstrap»Класс свертывания предоставляет несколько событий для подключения к функциональности свертывания:

https://getbootstrap.com/docs/3.3/javascript/#collapse-events

13

Извините за ответ на такой старый вопрос, но я искренне надеюсь, что мой вклад поможет кому-то еще.

Я нашел этот вопрос, потому что мне нужно было знать, как получитьid из.panel это было предметом события, которое стреляло.

@KyleMit был очень близок к ответу, который мне был нужен, но не совсем.

Это:

$('.panel').on('hidden.bs.collapse', function (e) {
    alert('Event fired on #' + e.currentTarget.id);
})

не стреляетalert

Это:

$('#accordion').on('hidden.bs.collapse', function (e) {
    alert('Event fired on #' + e.currentTarget.id);
})

срабатывает сis #accordion который нам не нужно получать, потому что мы уже знаем, чтобы связать#accordion в первую очередь.

Таким образом, чтобы получитьid из.panel элемент, который скрыт, вы бы использовалиe.target.id вместоe.currentTarget.id, Как это:

$('#accordion').on('hidden.bs.collapse', function (e) {
    alert('Event fired on #' + e.target.id);
})
Это именно то, что мне было нужно. David Baucum
Что сказал Дэвид Баукум Спасибо и bookoo. JRomeo
81

Когда документация перечисляетдоступные события, Это'Просто обещание, что оно всегда будет поднимать каждое конкретное событие в определенное время.

Например,hidden.bs.collapse будет повышаться всякий раз, когда:

свернутый элемент был скрыт от пользователя.

Кто-нибудь или нет?слушает это событие еще нееще не вступил в игру.

Чтобы использовать это или любое другое событие, мы можем использовать jQuery's.on() метод для прикрепления слушателей к определенным элементам HTML, чтобы увидеть, вызывают ли они определенные события.

То, куда мы добавим слушателя, зависит от того, где будет происходить событие и когда мы хотим его зафиксировать.

Простой пример:

Позволять'говорят, что у вас есть основнойHTML Структура для Аккордеонного управления:


  
  
  

В этом случае каждыйpanel класс собирается поднять это событие. Так что если вы хотите захватить его там, мы просто используем селектор класса jQuery, чтобы присоединить слушателей ко всем.panel объекты вроде так:

$('.panel').on('hidden.bs.collapse', function (e) {
    alert('Event fired on #' + e.currentTarget.id);
})
jsFiddleНо подождитеЕще ...

ВHTML, события будут пузыриться отсамый внутренний элемент к самому внешнему элементу если не обработано Таким образом, события, поднятые для каждого человека.panelтакже может обрабатываться.panel-group (или дажеbody элемент, как онив конце концов буду работать там).

На странице примеров начальной загрузки они используют селектор идентификатора для всегоpanel-group, который случается#myCollapsible, но в нашем случае это#accordion, Если мы хотим обработать событие там, мы можем просто изменить селектор jQuery следующим образом:

$('#accordion').on('hidden.bs.collapse', function (e) {
    alert('Event fired on #' + e.currentTarget.id);
})
Так же работает и в Bootstrap 2.3. Leszek Gruchała
Я хочу упомянуть одну вещь: когда используются дочерние свернутые элементы, предупреждение срабатывает 2 раза. Только для ребенка с ним 's собственный идентификатор, и один раз для родителя с его идентификатором. Это приводит к плохому контролю. Например, когда открываются parent и child, затем снова закрывают parent.open parent, потомок остается открытым. Это (личное) нежелательное поведение. HenryW
Чтобы прекратить пузыриться, вы можете использовать:$('.panel').on('hidden.bs.collapse', function (e) { e.stopPropagation(); alert('Event fired on #' + e.currentTarget.id); }) HenryW

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