7
votes

Bootstrap collapse ne bascule qu'une fois

Je tire encore une fois mes cheveux ici ... Donc, j'ai donc un effondrement de bootstrap fonctionnant avec jsfiddle ( http://jsfiddle.net/rasreye/xtppth/1/ ) - Mais lorsque j'ajoute à mon site, il ne s'effondre qu'une seule fois ... (c.-à-d. cliquer sur une en-tête qu'il s'ouvre, cliquez à nouveau sur une option. Il ferme, cliquez à nouveau et rien)

Voici un lien vers la page réelle avec le problème: http: / /www.urbanoffering.com/custom-optimizations P>

Heres le JS P>

<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>


1 commentaires

Votre projet utilise-t-il prototypejs par hasard?


8 Réponses :


15
votes

J'ai expérimenté ce problème très dans le dos. Il a été causé par un conflit créé par l'ancienne bibliothèque prototypejs. Notre correctif consistait à entrer dans le fichier bootstrap, à trouver la section de collapstion, trouvez la méthode de transition et modifiez

this.$element.triggerHandler(startEvent)


1 commentaires

Merci beaucoup! J'ai remplacé les lignes correspondantes de 'bootstrap: collapse.js v3.1' dans la bootstrap.js. Puis la magie est arrivée!



1
votes

J'avais un problème avec BXSlider JS Conflict et dans le fichier JS Bootstrap, je remplace tous les $ Element.Trigger avec $ Element.triggerHandler et cela a fonctionné.


1 commentaires

J'ai eu une version minimisée, alors j'ai également remplacé tous. Travaillé!



1
votes

J'avais un problème identique avec Bootstrap 3.3.1 et le prototype 1.7 dans une construction magento ...

a Trouver un Remplacer sur oly element.trigger avec $ Element.TriggerHandler dans la bibliothèque de bootstrap a travaillé comme un charme.

Assurez-vous de sauvegarder votre bibliothèque de bootstrap avant d'essayer ceci.


0 commentaires

1
votes

J'ai eu le même problème que cela a été causé par le double incluant des fichiers JavaScript.

J'ai Inclure mes fichiers JavaScript de bibliothèque deux fois , lorsque j'ai supprimé les réponses, cela fonctionne bien.


0 commentaires

0
votes

J'ai eu le même problème aujourd'hui. Mon correctif consistait simplement à mettre à jour Bootstrap et JQuery à leur dernière version.


0 commentaires

0
votes

J'ai eu le même problème lors de l'utilisation de cet effet JQuery-UI, qui met en évidence une cible d'ancrage pendant quelques secondes: xxx

J'ai mis quelque chose de plus spécifique comme un sélecteur: xxx

et les choses sont revenues à la normale.


0 commentaires

-1
votes

J'ai mis à niveau l'ancienne bootstrap de thème, tout est bon maintenant.


0 commentaires

0
votes

Je faisais face au même problème et je suis résolu lorsque j'ai mis à jour les fichiers BOotstrap CSS et JS. J'espère que cela aidera quelqu'un.


0 commentaires