jquery - Bootstrap 3 : Collapse show one hide others

Question

这是我的标记:

        <div class="hidden-md" id="mobile-info">

            <p class="text-center">
                <a href="#shopperExperience" class="btn btn-primary switch-chart" data-show-tip="pre-store-preparation" data-chart-title="Consumer Takes Us Through a Shopping Experience" data-toggle="collapse" aria-expanded="false" aria-controls="shopperExperience" data-parent="#mobile-info">Shopper Experience</a>

                <a href="#productLifeCycle" class="btn btn-primary switch-chart" data-show-tip="growth-over-time" data-chart-title="Understanding the Lifecycle of a Product or Service" data-toggle="collapse" aria-expanded="false" aria-controls="productLifeCycle" data-parent="#mobile-info">Product/Service Lifecycle</a>
            </p>

            <div id="shopperExperience" class="collapse">
                <%= render 'shared/shopper_exp_mobile_tips' %>
            </div>

            <div id="productLifeCycle" class="collapse">
                <%= render 'shared/product_lifecycle_mobile_tips' %>
            </div>
        </div>

所以，基本上，当单击其中一个按钮时，需要切换其他区域，但我不知道如何使其工作

Answer 1

除非您使用正确的标记，否则所谓的“ Accordion ”功能(这是您想要实现的)将无法在 BS3 上运行。

但是我使用这个小脚本让它工作:

<script type="text/javascript">
  $('.collapse').on('show.bs.collapse', function () {
    $('.collapse.in').each(function(){
        $(this).collapse('hide');
    });
  });
</script>