Как реализовать твитер-бутстрап-аккордеон?

Я пытаюсь реализовать плагин twitter bootstrap collapse (http://twitter.github.io/bootstrap/2.3.2/javascript.html#collapse), и я не могу заставить его работать. Думая, что в моей среде разработки что-то не так, я создал JSfiddle, и у меня все еще возникают те же проблемы. Вот jsfiddle:Как реализовать твитер-бутстрап-аккордеон?

http://jsfiddle.net/qdqrT/1/

Вот HTML, который был скопирован непосредственно из начальной загрузки. Например,

<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"> 
     Collapsible Group Item #1 
     </a> 
    </div> 
    <div id="collapseOne" class="accordion-body collapse in"> 
     <div class="accordion-inner"> 
     Anim pariatur cliche... 
     </div> 
    </div> 
    </div> 
    <div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
     Collapsible Group Item #2 
     </a> 
    </div> 
    <div id="collapseTwo" class="accordion-body collapse"> 
     <div class="accordion-inner"> 
     Anim pariatur cliche... 
     </div> 
    </div> 
    </div> 
</div>

CSS-и javscript были взяты непосредственно из страницы начальной загрузки подгоняют, с только коллапс CSS и JS, и trasition JS (который представляет собой зависимость для коллапса плагин).

Кто-нибудь знает, почему это не работает?

источник

2013-04-10 larkfofty

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

Я закончил тем, в том числе размещенной версии начальной загрузки CSS и JS от BootstrapCDN

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> 
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">

Вот рабочей версии: http://jsfiddle.net/qdqrT/3/

источник

2013-04-10 02:23:34 lightswitch05

Это замечательно, спасибо за ответ. Я бы предпочел не включать всю структуру бутстрапа только для функции коллапса. Я немного смущен тем, почему настроенный пакет начальной загрузки не работает. – larkfofty

Мне нужно будет посмотреть на него больше, но я думаю, что ваша версия не работает, потому что вам не хватает некоторых правил CSS, которые будут применяться, а не потому, что вам не хватает какого-либо javascript. – lightswitch05

Я попробовал его с новой версией начальной загрузки (3.3.4) и код в вопросе работал, когда включены правильные файлы.

Нет необходимости использовать версию бутстрапа CDN (но вы можете, если хотите).

Я самонастройки в подкаталоге и следующий в моем HTML:

<!-- Bootstrap CSS (put this in the header of your HTML file)--> 
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"> 

<!-- Bootstrap Javascript (put this at the end of your HTML file)--> 
<script src="bootstrap/js/bootstrap.min.js"></script>

(Я понимаю, что вопрос старый, но я думаю, что мой ответ более современны, чем принятый ответ и, надеюсь, это поможет кому-то)

источник

2015-03-23 14:29:11 paulo62

Как реализовать твитер-бутстрап-аккордеон?

ответ

Смежные вопросы