Fatal编程技术网
  • jquery/
  • Jquery 具有引导功能的两列

Jquery 具有引导功能的两列

jquery twitter-bootstrap

Jquery 具有引导功能的两列,jquery,twitter-bootstrap,Jquery,Twitter Bootstrap,我使用的是Bootstrap，在设计中，我们有一个两列的手风琴部分，一次只能有一个活动下拉状态 单击下拉菜单后，我遇到了维护cols的问题。左侧的元素在展开部分下方一直向右移动 请参见示例： 代码： <div class="col-xs-11 col-sm-7"> <div class="panel-group" id="accordion"> <div class="panel panel-default col-sm-6"> <d

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

单击下拉菜单后，我遇到了维护cols的问题。左侧的元素在展开部分下方一直向右移动

请参见示例：

代码：

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

例如：

欢迎来到stack overflow，你也可以在你的问题中添加相关的代码吗？哦，嘿，看看问题下面的示例笔。我知道你有一支笔，它实际上更有用，但SO指南规定你的问题必须包括“在问题本身中复制它所需的最短代码”，现在就开始练习吧，明白了。上面添加了。但是手风琴不会一次切换一个，除非nestedHa，是的，完全错过了。我想看看他们是否交换，我会编辑我的回答更新的答案，我试图找到一种不涉及js的方法，但我想不出一种方法来阻止两个col在没有分组到各自分区的情况下互相干扰。为了使用这种方法，必须使用一点js来让手风琴在Init的非引导模式下工作，但这里有一个工作版本，我刚刚得到一些帮助，它使用两个浮动列，可以跨列自动折叠（一次只扩展一个）。 
<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>

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