7

我又一次把头发拉出来了......所以我已经使用 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>
4

8 回答 8

15

不久前我遇到了这个问题。这是由旧的prototypeJS 库创建的冲突引起的。我们的解决方法是进入引导文件，找到 Collapse 部分，找到其中的转换方法，然后更改

this.$element.trigger(startEvent)

至

this.$element.triggerHandler(startEvent)

当然，缺点是每次将引导程序升级到较新版本时，您都必须记住添加此代码。

于 2013-06-19T22:25:08.260 回答
1

我遇到了同样的问题，它是由双重包含 javascript 文件引起的。

我确实包含了我的库 javascript 文件两次，当我删除重复的文件时，它运行良好。

于 2015-02-23T11:32:53.013 回答
1

我在 Magento 构建中遇到了与 Bootstrap 3.3.1 和 Prototype 1.7 相同的问题......

在 Bootstrap 库中用$element.triggerHandler找到$element.trigger的替换就像一个魅力。

在尝试此操作之前，请务必备份您的 Bootstrap 库。

于 2014-12-02T15:56:24.030 回答
1

我遇到了 bxslider js 冲突的问题，在 bootstrap js 文件中，我将所有 $element.trigger 替换为 $element.triggerHandler 并且它有效。

于 2013-08-21T15:33:49.067 回答
0

我今天遇到了同样的问题。我的修复只是将引导程序和 jQuery 更新到最新版本。

于 2015-02-26T19:56:58.293 回答
0

我在使用这个 jquery-ui 效果时遇到了同样的问题，它突出显示了一个锚目标几秒钟：

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

我已经把一些更具体的东西作为选择器：

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

事情又恢复了正常。

于 2015-10-20T02:07:02.627 回答
0

我遇到了同样的问题，当我更新引导 css 和 js 文件时它得到了解决。我希望这会对某人有所帮助。

于 2016-04-07T05:03:11.680 回答
-1

我升级了主题的旧引导程序，现在一切都很好。

于 2016-03-10T19:04:26.940 回答