1. дома
  2. Вопрос и ответ
  3. bootstrap collapse only toggles once

bootstrap collapse only toggles once

2013-06-19 3 views
6

Я снова вытаскиваю свои волосы здесь ... так что у меня обрушение загрузочной копии работает с jsFiddle (http://jsfiddle.net/rasreye/xtPtH/1/) - но когда я добавляю на свой сайт, он только рушится один раз .. . (т.е. нажмите на заголовок открывает, нажмите снова закрывается, не нажмите снова и НИЧЕГО)bootstrap collapse only toggles once

Вот ссылка на фактическую страницу с вопросом: 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>

источник

2013-06-19 Rahil Pirani

+0

Ваш проект использует прототип JS случайно? –

ответ

15

Я испытал эту проблему некоторое время назад. Это было вызвано конфликтом, созданным старой библиотекой prototypeJS. Наше исправление было идти в загрузочном файле, найдите раздел Collapse, найти в нем метод перехода и изменить

this.$element.trigger(startEvent)

в

this.$element.triggerHandler(startEvent)

И конечно же недостатком является то, что вы должны будете не забудьте добавить этот код в каждый раз, когда вы обновляете bootstrap до более новой версии.

источник

2013-06-19 22:25:08

+0

Это сделал Адам !!!! Спасибо! –

+0

Спасибо, человек. Вы только что спасли мой день :) – deanpodgornik

+0

Большое спасибо! Я заменил соответствующие строки из «Bootstrap: collapse.js v3.1.1» в bootstrap.js. Тогда случилось волшебство! – wagyaoo

1

У меня возникла проблема с конфликтом bxslider js и в файле bootstrap js. Я заменяю все $ element.trigger на $ element.triggerHandler, и он сработал.

источник

2013-08-21 15:33:49

+0

У меня была сводная версия, поэтому я также заменил все. Работал! –

1

я имел идентичную проблему с Bootstrap 3.3.1 и прототипа 1.7 в Magento сборки ...

найти замену на $ element.trigger с $ element.triggerHandler в Bootstrap библиотека работала как шарм.

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

источник

2014-12-02 15:56:24 D3XT3R

1

У меня была такая же проблема, как и двойные включения файлов javascript.

источник

2015-02-23 11:32:53 Ebrahim

0

У меня была такая же проблема сегодня. Мое исправление просто обновляло bootstrap и jQuery до их последней версии.

источник

2015-02-26 19:56:58

0

Я была такая же проблема при использовании этого JQuery-UI эффекта, выделить целевой объект привязки в течение нескольких секунд:

$('a[href^="#"]').on('click', function() { 
    var target = this.hash; 
    $(target).effect("highlight", {}, 3000); 
});

Я положил что-то более конкретное, как селектор:

$('a[href^="#somethingSpecific"]')

и все вернулось к нормальной жизни.

источник

2015-10-20 02:07:02 Roubi

-1

Я обновил старый бутстрап темы, теперь все хорошо.

источник

2016-03-10 19:04:26 Thomas

0

Я столкнулся с той же проблемой, и она была решена, когда я обновил загрузочные файлы css и js. Надеюсь, это поможет кому-то.

источник

2016-04-07 05:03:11

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

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