Почему может не работать аккордеон в Bootstrab?

Question

[Roman Hinex]

Этот кусок кода из одной большой страницы.

Проблема в том что кусок кода не работает как аккордеон*, т.е. два элемента можно держать открытыми одновременно.

- Да, JS подключен.
- Да, ошибок в консоле нет.
- Да, документацию читал.
- Да, элементы открываются и закрываются по клику, суть проблемы изложена выше.

<div class="col-sm-3 col-md-2 sidebar" id="sidebar-collapse">
        <ul class="nav nav-sidebar">
            <li>
                <a data-toggle="collapse" data-parent="#sidebar-collapse" href="#category-4">Категория 0</a>

                <ul class="nav nav-tutorial collapse" id="category-4">
                    <li>
                        <a href="/ajax/articleget?id=1">Acer Aspire V5</a>
                    </li>
                    <li>
                        <a href="/ajax/articleget?id=10">asdasd</a>
                    </li>
                </ul>
            </li>
            <li>
                <a data-toggle="collapse" data-parent="#sidebar-collapse" href="#category-5">Категория 1</a>

                <ul class="nav nav-tutorial collapse" id="category-5">
                    <li>
                        <a href="/ajax/articleget?id=8">sdfsdfsd</a>
                    </li>
                </ul>
            </li>
            <li>
                <a data-toggle="collapse" data-parent="#sidebar-collapse" href="#category-6">Категория 2</a>

            </li>
        </ul>
    </div>

*для тех кто не знает что такое "аккордеон":

Аккордеонами этот тип меню назвали в честь музыкального инструмента (нам, конечно ближе баян, или гармонь :) ), потому что в нем, как в гармошке, расширение одной области происходит за счет сжатия другой. В типичных случаях высота аккордеона фиксирована, поэтому в один момент времени может быть видна одна – и только одна – область меню; однако, некоторые аккордеоны позволяют скрыть и эту область – так что вообще все пункты меню оказываются свернутыми.

Answer 1

[wkuznet]

открываем код плагина collapse.js и на 41-й строке видим

var actives = this.$parent && this.$parent.find('> .panel > .in')

это значит что все li верхнего уровня должны иметь класс .panel

Comments

[Roman Hinex]

Спасибо за ответ, попробую чуть позднее

Answer 2

[Максим Гречушников]

познакомьтесь с Firebug, он ответит на многие вопросы

верстки мало, надо подключить еще и js

Comments

[Roman Hinex]

Разумеется bootstrap подключен, это очевидно.

Answer 3

[Filipp Shcherbanich]

Подключите js бутстрапа, если не помогло, откройте консоль и посмотрите, есть ли там какие-то ошибки, возможно из-за них не отрабатываются нужные действия

Comments

[Roman Hinex]

Разумеется bootstrap подключен, это очевидно. Ошибок никаких нет.

[Filipp Shcherbanich]

@HiNeX, если бутстрап 3 - getbootstrap.com/javascript/#collapse . Как говорится, найдите отличия

[Roman Hinex]

@scherbanich документацию читал, оттуда и решение с коллапсами. Если Вы про пример с панелями, в моей задаче они не нужны, хотелось бы решить проблему списками..

[Roman Hinex]

@scherbanich вообще странно что оно так себя ведет, сворачивает и разворачивает верно, но делает вид что родителя вообще нет. Хотя "id" и указан.

[Filipp Shcherbanich]

@HiNeX, попробуйте свой обработчик написать на событие и скройте все другие элементы
$('#sidebar-collapse').collapse({
toggle: false
});
$('#sidebar-collapse').on('show.bs.collapse', function () {
// do something…
})

[Roman Hinex]

@scherbanich да, спасибо, в крайнем случае так и сделаю

Answer 4

[Александр Зачиналов]

в ссылках вместо href="#category4" пропишите data-target="#category4"Должно работать

Comments

[Roman Hinex]

Опять же можно открыть два элемента одновременно :(