Bootstrap 3:折叠显示一个隐藏其他人

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>