Метод hide Bootstrap collapse покажет элемент collapse

вот простой пример: ссылке

  1. выберите изменение размера, сделав box div больше
  2. нажмите кнопку еще раз, делая ее нормального размера. Однако вы увидите элемент collapse, который не должен отображаться.

Я думаю, это связано с этой строкой:

$("div.inbox").collapse("hide");


Цель этой строки: если пользователи нажали a тег для отображения элемента collapse, когда они уменьшают box div, элемент collapse будет скрыт.

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

6
jquery twitter-bootstrap

5 ответов

при вызове модуля collapse для элемента, если он не был инициализирован, инициализируется процесс инициализации (см. коллапс.Яш источник).

по умолчанию процесс init переключает элементы (показывая его, если он скрыт, и скрывая его, если он виден) - эквивалентно .collapse('toggle').

сначала вам нужно инициализировать складной элемент, отключив параметр toggle-on-init (см. getbootstrap.com док!--4-->):

$("div.inbox").collapse({toggle: false});

см. пример на вашем обновленный скрипку

12

похоже, что collapse () срабатывает в первый раз с "show" независимо от того, что. Простое решение-проверить .отображается папка "Входящие", и если это так, огонь свернуть ("скрыть"). Мы можем получить состояние элемента, проверив, добавлен ли класс "in" -.collapse = элемент скрытый,.коллапс.in = показанный элемент

$("button.resize").click(function(){
    var isExpanded = !$("div.box").hasClass("expanded");
    $("div.box").toggleClass("expanded", isExpanded);
    if ($("div.inbox").hasClass("in")) {
        $("div.inbox").collapse('hide');
    }
});
1

в моем случае, я do хотите переключаться после первоначального скрытия. Поэтому я в конечном итоге использовал это:

$thingToCollapse.collapse({ 'toggle': false }).collapse('hide');
1

попробовав много томов, я закончил:

из источника https://getbootstrap.com/docs/3.3/javascript/ .свернуть скрывает содержимое .сворачивание применяется во время переходов - ... коллапс.в показывает содержание

// скрыть

if ($('#div').hasClass("in")) {$(#div).removeClass('in');}

// показать

$('#div').addClass('in');

работает для меня!

0

$("div").свернуть ("показать"); $("элемент div.)"свернуть ("скрыть");

-1