Подтвердить что ты не робот

Связывание для свертывания события в Twitter Загрузочный файл 3

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

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <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">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <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">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <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>

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

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

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

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

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

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

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

Скажем, у вас есть основная структура HTML для элемента управления Accordion:

<div class="panel-group" id="accordion">
  <div class="panel panel-default" id="panel1"><!--...--></div>
  <div class="panel panel-default" id="panel2"><!--...--></div>
  <div class="panel panel-default" id="panel3"><!--...--></div>
</div>

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

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

jsFiddle

Но подождите там Подробнее...

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

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

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

Ответ 2

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

Я нашел этот вопрос, потому что мне нужно было знать, как получить 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);
})