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

所谓的＆＃34;手风琴＆＃34;除非您使用正确的标记，否则功能（这是您想要实现的功能）不会在BS3上工作。

但是我使用这个小脚本工作了：

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

Answer 2

<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">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">Product/Service Lifecycle</a>
</p>

<div id="shopperExperience" class="collapse" data-parent="#mobile-info">
  <%=r ender 'shared/shopper_exp_mobile_tips' %>
</div>

<div id="productLifeCycle" class="collapse" data-parent="#mobile-info">
  <%=r ender 'shared/product_lifecycle_mobile_tips' %>
</div>

这应该为你做。

似乎有一个Bug。 data-parent取决于.pannel

更多关于Bug GitHub

Answer 3

如果您需要bootstrap4：

    $(document).ready(function(){
        $('.collapse').on('show.bs.collapse', function () {
            $('.collapse.show').each(function(){
                $(this).collapse('hide');
            });
        });
    });

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

3 个答案: