Bootstrap collapse переключается только один раз
Я снова вытаскиваю свои волосы здесь... поэтому у меня есть Bootstrap collapse, работающий с jsFiddle (http://jsfiddle.net/rasreye/xtPtH/1/) -- но когда я добавляю на свой сайт, он рушится только один раз... (т. е. нажмите на заголовок, который он открывает, нажмите еще раз, он закрывается, нажмите еще раз и ничего)
вот ссылка на страницу с вопросом: http://www.urbanoffering.com/custom-optimizations
вот JS
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function() {
$('.accordion').on('show', function (e) {
$(e.target).prev('.accordion-heading').find('.accordion-toggle').addClass('active');
});
$('.accordion').on('hide', function (e) {
$(this).find('.accordion-toggle').not($(e.target)).removeClass('active');
});
});
});//]]>
</script>
<script>
$(document).ready(function () {
location.hash && $(location.hash + '.collapse').collapse('show');
});
</script>
и HTML-код
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle active" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<h2>Shirt Collars</h2>
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
<ul>
<li class="coprod"><img src="http://www.urbanoffering.com/media/wysiwyg/standard.jpg" alt="Standard Collar" width="225" height="225" />
<h3>Standard</h3>
</li>
<li class="coprod"><img src="http://www.urbanoffering.com/media/wysiwyg/standard_buttons_1.jpg" alt="Standard with Button Collar" width="225" height="225" />
<h3>Standard with Buttons</h3>
</li>
<li class="coprod"><img src="http://www.urbanoffering.com/media/wysiwyg/small_standard.jpg" alt="Red Ribbon Lapel Flower" width="225" height="225" />
<h3>Small Standard</h3>
</li>
<li class="coprod"><img src="http://www.urbanoffering.com/media/wysiwyg/small_standard_buttons.jpg" alt="Red Ribbon Lapel Flower" width="225" height="225" />
<h3>Small Standard with Buttons</h3>
</li>
<li class="coprod"><img src="http://www.urbanoffering.com/media/wysiwyg/standard_round.jpg" alt="Red Ribbon Lapel Flower" width="225" height="225" />
<h3>Standard Round</h3>
</li>
<li class="coprod"><img src="http://www.urbanoffering.com/media/wysiwyg/cutaway.jpg" alt="Red Ribbon Lapel Flower" width="225" height="225" />
<h3>Cutaway</h3>
</li>
<li class="coprod"><img src="http://www.urbanoffering.com/media/wysiwyg/cutaway_round.jpg" alt="Red Ribbon Lapel Flower" width="225" height="225" />
<h3>Cutaway Round</h3>
</li>
<li class="coprod"><img src="http://www.urbanoffering.com/media/wysiwyg/standard_double_buttons.jpg" alt="Red Ribbon Lapel Flower" width="225" height="225" />
<h3>Standard with Double Buttons</h3>
</li>
<li class="coprod"><img src="http://www.urbanoffering.com/media/wysiwyg/Barrel.jpg" alt="Red Ribbon Lapel Flower" width="225" height="225" />
<h3>Barrel</h3>
</li>
<li class="coprod"><img src="http://www.urbanoffering.com/media/wysiwyg/tuxedo.jpg" alt="" width="225" height="225" />
<h3>Tuxedo</h3>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
<h2>Shirt Cuffs</h2>
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
<ul>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/single_round.jpg" alt="Single Round" width="225" height="225" />
<h3>Single Round</h3>
</li>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/single_notch.jpg" alt="Red Ribbon Lapel Flower" width="225" height="225" />
<h3>Single Notch</h3>
</li>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/single_edge.jpg" alt="Single Edge" width="225" height="225" />
<h3>Single Edge</h3>
</li>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/double_round.jpg" alt="Red Ribbon Lapel Flower" width="225" height="225" />
<h3>Double Round</h3>
</li>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/double_notch.jpg" alt="Red Ribbon Lapel Flower" width="225" height="225" />
<h3>Double Notch</h3>
</li>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/double_edge.jpg" alt="Double Edge" width="225" height="225" />
<h3>Double Edge</h3>
</li>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/french_round.jpg" alt="Red Ribbon Lapel Flower" width="225" height="225" />
<h3>French Round</h3>
</li>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/french_notch.jpg" alt="French Notch" width="225" height="225" />
<h3>French Notch</h3>
</li>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/french_edge.jpg" alt="French Edge" width="225" height="225" />
<h3>French Edge</h3>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
<h2>Shirt Pleats</h2>
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
<ul>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/double_wide.jpg" alt="Double Wide" width="225" height="225" />
<h3>Double Wide</h3>
</li>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/double_middle.jpg" alt="Double Dibble" width="225" height="225" />
<h3>Double Middle</h3>
</li>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/darts.jpg" alt="Darts" width="225" height="225" />
<h3>Darts</h3>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
<h2>Suit Buttons</h2>
</a>
</div>
<div id="collapseFour" class="accordion-body collapse">
<div class="accordion-inner">
<ul>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/suit_buttons.png" alt="Double Wide" width="225" height="225" />
<h3>One Button</h3>
</li>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/suit_buttons_two.png" alt="Double Dibble" width="225" height="225" />
<h3>Two Button</h3>
</li>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/suit_buttons_three.png" alt="Darts" width="225" height="225" />
<h3>Three Button</h3>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFive">
<h2>Suit Lapels</h2>
</a>
</div>
<div id="collapseFive" class="accordion-body collapse">
<div class="accordion-inner">
<ul>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/standard_notch.png" alt="Double Wide" width="225" height="225" />
<h3>Standard Notch</h3>
</li>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/narrow_notch.png" alt="Double Dibble" width="225" height="225" />
<h3>Narrow Notch</h3>
</li>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/peak_lapel.png" alt="Darts" width="225" height="225" />
<h3>Peak Lapel</h3>
</li>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/shawl_lapel.png" alt="Darts" width="225" height="225" />
<h3>Shawl Lapel</h3>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseSix">
<h2>Suit Details</h2>
</a>
</div>
<div id="collapseSix" class="accordion-body collapse">
<div class="accordion-inner">
<ul>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/pick_stitching.png" alt="Double Wide" width="225" height="225" />
<h3>Pick Stitching</h3>
</li>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/functional_lapel.png" alt="Double Dibble" width="225" height="225" />
<h3>Functional Lapel</h3>
</li>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/functional_sleeve.png" alt="Darts" width="225" height="225" />
<h3>Functional Sleeve Button Holes</h3>
</li>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/pen_pockets.png" alt="Darts" width="225" height="225" />
<h3>Pen Pocket</h3>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseSeven">
<h2>Suit Pockets</h2>
</a>
</div>
<div id="collapseSeven" class="accordion-body collapse">
<div class="accordion-inner">
<ul>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/regular_pockets.png" alt="Double Wide" width="225" height="225" />
<h3>Regular Pockets</h3>
</li>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/slanted_pockets.png" alt="Double Dibble" width="225" height="225" />
<h3>Slanted Pockets</h3>
</li>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/regular_ticket_pocket.png" alt="Darts" width="225" height="225" />
<h3>Regular Pockets with Ticket Pocket</h3>
</li>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/slanted_ticket_pockets.png" alt="Darts" width="225" height="225" />
<h3>Slanted Pockets with Ticket Pocket</h3>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseEight">
<h2>Suit Vents</h2>
</a>
</div>
<div id="collapseEight" class="accordion-body collapse">
<div class="accordion-inner">
<ul>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/no_vents.png" alt="Double Wide" width="225" height="225" />
<h3>No Vents</h3>
</li>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/one_vent.png" alt="Double Dibble" width="225" height="225" />
<h3>One Vent</h3>
</li>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/two_vents.png" alt="Darts" width="225" height="225" />
<h3>Two Vents</h3>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseNine">
<h2>Suit Pant Pleats</h2>
</a>
</div>
<div id="collapseNine" class="accordion-body collapse">
<div class="accordion-inner">
<ul>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/no_pant_pleat.png" alt="Double Wide" width="225" height="225" />
<h3>No Pant Pleats</h3>
</li>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/one_pant_pleat.png" alt="Double Dibble" width="225" height="225" />
<h3>Single Pant Pleats</h3>
</li>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/double_pant_pleat.png" alt="Darts" width="225" height="225" />
<h3>Double Pant Pleats</h3>
</li>
<li class="coprod"> <img src="http://www.urbanoffering.com/media/wysiwyg/pant_pleat_cuffs.png" alt="Darts" width="225" height="225" />
<h3>With Cuffs</h3>
</li>
</ul>
</div>
</div>
</div>
</div>
8 ответов
Я испытал эту проблему некоторое время назад. Это было вызвано конфликтом старых prototypeJS библиотека. Наше исправление состояло в том, чтобы войти в файл начальной загрузки, найти раздел Collapse, найти метод перехода в нем и изменить
this.$element.trigger(startEvent)
to
this.$element.triggerHandler(startEvent)
и, конечно, недостатком является то, что вам придется не забывать добавлять этот код при каждом обновлении bootstrap до более новой версии.
У меня была проблема с конфликтом bxslider js, и в файле начальной загрузки js я заменяет весь элемент$.триггер с $элемент.triggerHandler и это сработало.
У меня была идентичная проблема с Bootstrap 3.3.1 и Prototype 1.7 в сборке Magento...
a найти замену на $элемент.триггер С $элемент.triggerHandler в библиотеке Bootstrap работал как шарм.
Не забудьте создать резервную копию библиотеки начальной загрузки перед попыткой этого.
У меня была та же проблема, что и при двойном включении файлов javascript.
Я включите мои файлы javascript библиотеки дважды, когда я удалил повторяющиеся, он работает хорошо.
У меня была та же проблема сегодня. Мое исправление было просто обновлением bootstrap и jQuery до их последней версии.
у меня была такая же проблема при использовании этого эффекта jQuery-ui, который выделяет цель привязки в течение нескольких секунд:
$('a[href^="#"]').on('click', function () {
var target = this.hash;
$(target).effect("highlight", {}, 3000);
});
Я поставил что-то более конкретное в качестве селектора:
$('a[href^="#somethingSpecific"]')
и все вернулось в норму.
Я столкнулся с той же проблемой, и она была решена, когда я обновил файлы CSS и js bootstrap. Надеюсь, это кому-то поможет.