Bootstrap 3:崩溃显示一个隐藏其他 [英] Bootstrap 3: Collapse show one hide others

问题描述

这是我的标记:

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

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

So, basically when one of the buttons is clicked on, the other areas need to be toggled, but I can't figure out how to make it work

推荐答案

除非您使用正确的标记，否则所谓的手风琴"功能(您要实现的功能)在BS3上将不起作用.

The so called "Accordion" feature (which is what you want to achieve) won't work on BS3 unless you use the right markup.

但是我使用以下小脚本使其起作用:

However I made it work using this little script:

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

这篇关于Bootstrap 3:崩溃显示一个隐藏其他的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！