Как мне загрузить аккордеон со всеми закрытыми меню?

Я пытаюсь следовать примеру здесь



http://twitter.github.com/bootstrap/javascript.html#collapse



Я разместил здесь макет



http://jsfiddle.net/gqe7g/



поведение загрузки странно. Он показывает Menu1, затем сворачивает его, затем показывает Menu2 и Menu3. Хотелось бы, чтобы все открылось рухнуло. Я попробовал следующее без успеха



$('#accordion').collapse({hide: true})
566   13  

13 ответов:

замена

$(".collapse").collapse();
$('#accordion').collapse({hide: true})

С:

$('#collapseOne').collapse("hide");

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

29  
2012-02-23 22:02:28

из документа:

Если вы хотите, чтобы он был открыт по умолчанию, добавьте дополнительный класс.

другими словами, оставьте "in", и он будет по умолчанию закрываться. http://jsfiddle.net/JBRh7/

161  
2012-05-24 03:00:14

если вы хотите закрыть все свернуты при загрузке страницы:

в классе collapse in замените его на класс collapse.

id="collapseOne" class="panel-collapse collapse **in**" role="tabpanel" aria-labelledby="headingOne">

обновление:

id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
31  
2015-11-10 16:58:09

изменить

class="accordion-body collapse in"

до

class="accordion-body collapse"

на collapseOne DIV

11  
2017-02-13 07:55:51

если вы хотите Баян до коллапс изначально вы можете сделать это с уже существующими bootstrap определения, javascript не нужен.

добавить класс collapsed к якорю или дескриптору, который будет целью щелчка для пользователей toggle они открыты / закрыты. Кроме того, удалите in класс из сворачивающегося контейнера.

Bootstrap также предоставляет несколько дополнительных спецификаций который может быть передан путем добавления data-parent="" и data-toggle=""

  • data-parent принимает селектор и указывает, что все складные элементы, которые являются братьями и сестрами родителя данных, будут переключаться в унисон.
  • data-toggle принимает булево true или false и устанавливает вызов на складном элементе.

Примеры Сценариев:

➤ будет загружаться свернуто

<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                Title
            </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse">
            <div class="accordion-inner">
                Details

➤ будет нагрузка расширена

<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                Title
            </a>
        </div>
        <div id="collapseOne" class="accordion-body">
            <div class="accordion-inner">
                Details

➤ загрузить расширенную

<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                Title
            </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse in">
            <div class="accordion-inner">
                Details

в 3-м примере аккордеон по умолчанию будет расширен независимо от того, что collapsed класс указан, потому что in класс на контейнере получит больше веса.

если вы хотите запустить аккордеон через Javascript, вам нужно только вызвать метод collapse() вместе с соответствующим идентификатором или селектор класса, который нацеливается на складной элемент.

collapse() также принимает те же параметры, которые могут быть добавлены в разметку. data-parent и data-toggle

9  
2014-10-01 07:33:34

вы пропускаете класс " В " на аккордеон - тело ДИВС для Menu2 и Menu3

каждый из ваших аккордеон-тела дивов должен иметь class="accordion-body collapse in". Прямо сейчас, несколько из них просто есть class="accordion-body collapse"

http://jsfiddle.net/fcJJT/

7  
2012-02-23 21:18:49

Вы можете передать параметр toggle: false для оператора collapse, чтобы все элементы аккордеона были скрыты при загрузке, например:

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

демо: http://jsfiddle.net/gqe7g/9/

4  
2012-02-24 00:36:32

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

 active: false;//this does the trick

полный:

<div id="accordian_div">
    <h1>first</h1>
        <div>
            put something here
        </div>
    <h1>second</h1>
        <div>
            put something here
        </div>
    <h1>third</h1>
        <div>
            put something here
        </div>
</div>

<script type="text/javascript">
     $(document).ready(function() {
        $("#accordian_div").accordion({
            collapsible: true,
            active: false,
            clearStyle: true
        });
      });
</script>

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

2  
2012-02-24 00:14:31

просто удалить .in класс .panel-collapse в "collapseOne". (Начальной загрузки В3.3.7)

2  
2017-05-20 17:28:25

используйте метод hide, который предоставляет Bootstrap,

$('.collapse').collapse('hide')

демо на http://thefanciful.com. моя информация скрыта при загрузке и активируется при нажатии кнопки. :)

1  
2013-03-02 17:30:30

С помощью jQuery, это сработало для меня, имея все контейнеры рухнула при загрузке страницы

добавлять {active: false} а должно быть collapsible включена конечно

  $(function () {
      $("#accordion").accordion({ collapsible: true, active: false });
      $(".selector").accordion();
  });
0  
2014-10-13 12:01:11 
<script type="text/javascript">  

    jQuery(document).ready(function ($) {

       $('#collapseOne').collapse("hide");
    });      

</script>
0  
2015-09-27 16:21:28

Я знаю, это старая дискуссия, но вот еще два решения, которые сработали:

1) Добавить

класс aria-expanded="true" внутри этой ссылки:

<a data-toggle="collapse" data-parent="#accordion"...></a>

2) в случае, если вы используете панели (как показано ниже)

<div id="collapse1" class="panel-collapse out collapse in" style="height: auto;">

изменение collapse in до collapse out также будет делать трюк

0  
2017-02-13 06:29:29

Comments

    Ничего не найдено.
Click here to cancel reply.