带Bootstrap的两列手风琴

debugcn 发表于 Dev

取消关注

我使用的是Bootstrap，在设计中，我们有两个col手风琴部分，一次只能具有一个活动的下拉状态。

单击下拉列表后，我在维护cols时遇到了问题。在扩展部分下，左侧的元素保持向右移动。

请参见示例：Bootply

代码：

<div class="col-xs-11 col-sm-7">
<div class="panel-group" id="accordion">


    <div class="panel panel-default col-sm-6">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne1">
            TEST1
        </a>
      </h4>
    </div>
    <div id="collapseOne1" class="panel-collapse collapse">
      <div class="panel-body">
TESTTESTTESTTESTTEST     
      </div>
    </div>
  </div>




  <div class="panel panel-default col-sm-6">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo2">
TEST 2       </a>
      </h4>
    </div>
    <div id="collapseTwo2" class="panel-collapse collapse">
      <div class="panel-body">
TESTTESTTESTTEST        
      </div>
    </div>
  </div>



  <div class="panel panel-default col-sm-6">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree3">
TEST3        </a>
      </h4>
    </div>
    <div id="collapseThree3" class="panel-collapse collapse">
      <div class="panel-body">
TESTTESTTESTTEST       
      </div>
    </div>
  </div>




  <div class="panel panel-default col-sm-6">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseFour4">
TEST   4     </a>
      </h4>
    </div>
    <div id="collapseFour4" class="panel-collapse collapse">
      <div class="panel-body">
TESTTESTTESTTEST       
      </div>
    </div>
  </div>






  <div class="panel panel-default col-sm-6">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseFive5">
TEST  5      </a>
      </h4>
    </div>
    <div id="collapseFive5" class="panel-collapse collapse">
      <div class="panel-body">
TESTTESTTESTTEST        
      </div>
    </div>
  </div>



  <div class="panel panel-default col-sm-6">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseSix6">
TEST    6    </a>
      </h4>
    </div>
    <div id="collapseSix6" class="panel-collapse collapse">
      <div class="panel-body">
TESTTESTTESTTEST       
      </div>
    </div>
  </div>

  <div class="panel panel-default col-sm-6">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven">
TEST  7      </a>
      </h4>
    </div>
    <div id="collapseSeven" class="panel-collapse collapse">
      <div class="panel-body">
TESTTESTTESTTESTTESTTEST   
      </div>
    </div>
  </div>


  <div class="panel panel-default col-sm-6">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseEight">
TEST  8      </a>
      </h4>
    </div>
    <div id="collapseEight" class="panel-collapse collapse">
      <div class="panel-body">
TESTTESTTESTTESTTESTTEST
      </div>
    </div>
  </div>




  <div class="panel panel-default col-sm-6">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseNine">
TEST  9      </a>
      </h4>
    </div>
    <div id="collapseNine" class="panel-collapse collapse">
      <div class="panel-body">
TESTTESTTESTTESTTESTTEST       
      </div>
    </div>
  </div>




  <div class="panel panel-default col-sm-6">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTen">
TEST     10   </a>
      </h4>
    </div>
    <div id="collapseTen" class="panel-collapse collapse">
      <div class="panel-body">
TESTTESTTESTTESTTESTTEST      
      </div>
    </div>
  </div>






  <div class="panel panel-default col-sm-6">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseEleven">
TEST  11      </a>
      </h4>
    </div>
    <div id="collapseEleven" class="panel-collapse collapse">
      <div class="panel-body">
TESTTESTTESTTESTTESTTEST       
      </div>
    </div>
  </div>




  <div class="panel panel-default col-sm-6">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwelve">
TEST    12    </a>
      </h4>
    </div>
    <div id="collapseTwelve" class="panel-collapse collapse">
      <div class="panel-body">
TESTTESTTESTTESTTEST      
      </div>
    </div>
  </div>



</div>
</div>

感谢任何帮助！

桲

与其col-sm-6在每个面板周围添加空格，不如将两个侧面分组到各自的div中，然后将“ col-sm-6”添加到每个群组中

示例：http：//www.bootply.com/vfbv3Cnn6v

<div class="col-xs-11 col-sm-7">
    <div class="panel-group" id="accordion">

        <!-- start panel left -->
        <div class="panel-left col-sm-6">
            <!-- start panel -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_1">
                        TEST_1
                     </a>
                    </h4>
                </div>
                <div id="TEST_1" class="panel-collapse collapse">
                    <div class="panel-body">
                        TESTTESTTESTTESTTEST
                    </div>
                </div>
            </div>
            <!-- end panel -->

            <!-- start panel -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_2">
                        TEST_2
                     </a>
                    </h4>
                </div>
                <div id="TEST_2" class="panel-collapse collapse">
                    <div class="panel-body">
                        TESTTESTTESTTESTTEST
                    </div>
                </div>
            </div>
            <!-- end panel -->

            <!-- start panel -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_3">
                        TEST_3
                     </a>
                    </h4>
                </div>
                <div id="TEST_3" class="panel-collapse collapse">
                    <div class="panel-body">
                        TESTTESTTESTTESTTEST
                    </div>
                </div>
            </div>
            <!-- end panel -->

            <!-- start panel -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_4">
                        TEST_4
                     </a>
                    </h4>
                </div>
                <div id="TEST_4" class="panel-collapse collapse">
                    <div class="panel-body">
                        TESTTESTTESTTESTTEST
                    </div>
                </div>
            </div>
            <!-- end panel -->

            <!-- start panel -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_5">
                        TEST_5
                     </a>
                    </h4>
                </div>
                <div id="TEST_5" class="panel-collapse collapse">
                    <div class="panel-body">
                        TESTTESTTESTTESTTEST
                    </div>
                </div>
            </div>
            <!-- end panel -->

            <!-- start panel -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_6">
                        TEST_6
                     </a>
                    </h4>
                </div>
                <div id="TEST_6" class="panel-collapse collapse">
                    <div class="panel-body">
                        TESTTESTTESTTESTTEST
                    </div>
                </div>
            </div>
            <!-- end panel -->




        </div> 
        <!-- end panel left -->


        <!-- start panel right -->
        <div class="panel-left col-sm-6">
            <!-- start panel -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_7">
                        TEST_7
                     </a>
                    </h4>
                </div>
                <div id="TEST_7" class="panel-collapse collapse">
                    <div class="panel-body">
                        TESTTESTTESTTESTTEST
                    </div>
                </div>
            </div>
            <!-- end panel -->

            <!-- start panel -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_8">
                        TEST_8
                     </a>
                    </h4>
                </div>
                <div id="TEST_8" class="panel-collapse collapse">
                    <div class="panel-body">
                        TESTTESTTESTTESTTEST
                    </div>
                </div>
            </div>
            <!-- end panel -->

            <!-- start panel -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_9">
                        TEST_9
                     </a>
                    </h4>
                </div>
                <div id="TEST_9" class="panel-collapse collapse">
                    <div class="panel-body">
                        TESTTESTTESTTESTTEST
                    </div>
                </div>
            </div>
            <!-- end panel -->

            <!-- start panel -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_10">
                        TEST_10
                     </a>
                    </h4>
                </div>
                <div id="TEST_10" class="panel-collapse collapse">
                    <div class="panel-body">
                        TESTTESTTESTTESTTEST
                    </div>
                </div>
            </div>
            <!-- end panel -->

            <!-- start panel -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_11">
                        TEST_11
                     </a>
                    </h4>
                </div>
                <div id="TEST_11" class="panel-collapse collapse">
                    <div class="panel-body">
                        TESTTESTTESTTESTTEST
                    </div>
                </div>
            </div>
            <!-- end panel -->

            <!-- start panel -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#TEST_12">
                        TEST_12
                     </a>
                    </h4>
                </div>
                <div id="TEST_12" class="panel-collapse collapse">
                    <div class="panel-body">
                        TESTTESTTESTTESTTEST
                    </div>
                </div>
            </div>
            <!-- end panel -->




        </div> 
        <!-- end panel right -->




    </div>
</div>

我也发现当我有大量的嵌套div时，添加注释以显示重要区域的打开和关闭位置很方便。

因此，为了使手风琴仍然尊重打开和关闭引导程序，文档说show.bs.collapse在显示面板时会触发一个事件，以便使用该事件隐藏任何具有该类的面板in（这表示打开的面板）

$('#accordion').on('show.bs.collapse', function () {
    $('#accordion .in').collapse('hide');
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-8

我来说两句

0条评论

登录后参与评论

来自分类Dev

带Bootstrap的两列手风琴

来自分类Dev

Bootstrap手风琴

来自分类Dev

Bootstrap手风琴

来自分类Dev

带箭头的引导手风琴

来自分类Dev

Bootstrap手风琴未关闭

来自分类Dev

Bootstrap手风琴问题

来自分类Dev

Bootstrap手风琴-全部关闭

来自分类Dev

Bootstrap手风琴面板/折叠

来自分类Dev

Bootstrap手风琴不塌陷

来自分类Dev

Bootstrap手风琴不会塌陷？

来自分类Dev

twitter bootstrap手风琴的bug

来自分类Dev

Bootstrap手风琴箭头颜色

来自分类Dev

Bootstrap手风琴表现怪异

来自分类Dev

Popover内部的Bootstrap手风琴

来自分类Dev

更改 Bootstrap 手风琴配置

来自分类Dev

Bootstrap 3手风琴vs jQuery UI手风琴

来自分类Dev

Bootstrap手风琴，单击时滚动到活动（打开）手风琴的顶部？

来自分类Dev

带锚按钮的多捆手风琴效果

来自分类Dev

带CSS过渡的JavaScript手风琴

来自分类Dev

在选项卡中使用两个Bootstrap手风琴

来自分类Dev

带Bootstrap v3的Bootstrap v2手风琴-哪个类更改了？

来自分类Dev

多个手风琴

来自分类Dev

多个手风琴

来自分类Dev

如何将Angular UI Bootstrap手风琴拆分为多列？

来自分类Dev

jQuery手风琴分为两栏

来自分类Dev

Bootstrap手风琴+数据表

来自分类Dev

在angularjs页面上使用bootstrap手风琴

来自分类Dev

React-Bootstrap手风琴无法正常工作

来自分类Dev

Bootstrap手风琴刷新设置

Related 相关文章

文章