jquery - 带 Bootstrap 的两列 Accordion-6ren

jquery - 带 Bootstrap 的两列 Accordion

转载作者：行者123 更新时间：2023-12-01 01:33:26

我正在使用 Bootstrap，在设计中，我们有一个两列 Accordion 部分，一次只能有一个事件下拉状态。

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

请参阅示例: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 时，添加注释来显示重要区域的打开和关闭位置会很方便。

所以为了让 Accordion 仍然尊重打开和关闭 Bootstrap 文档，有一个事件 show.bs.collapse 在显示面板时会被触发，所以使用它来隐藏哪个面板具有类in(这表示打开的面板)

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

关于jquery - 带 Bootstrap 的两列 Accordion ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25633028/

文章推荐： javascript - 具有多个数组的 JSON 对象

文章推荐： d - 关联数组 .remove[] 在 dmd 2.0 中调用 core.stdc.stdio.remove

文章推荐： javascript - 解析 CSV 而不下载/保存

文章推荐： wcf - 无法访问已处置的对象

SQL ORDER BY 带 CASE 带 UNION ALL
运行 PostgreSQL(7.4 和 8.x)，我认为这是可行的，但现在我遇到了错误。我可以单独运行查询，它工作得很好，但如果我使用 UNION 或 UNION ALL，它会抛出错误。这个错误:
java - 带 fragment 的抽屉导航(带 ViewPager)重新打开时消失
我试图为我的应用程序创建一个导航，使用抽屉导航我的 fragment 之一(HomeFragment)有一个 ViewPager，可容纳 3 个 fragment (Bundy Clock、Annou
android - 带 Activity 的抽屉导航和。带 fragment 的抽屉导航
以我目前正在开发的应用为例: - 它有一个包含多个项目的抽屉导航；现在有两个项目让我感兴趣，我将它们称为 X 和 Y。 X 和 Y 都在单击时显示包含 x 元素或 y 元素列表的 fragment 选
python - 如何将形状为(带、行、列)的数组重新整形为(行、列、带)？
我有一个形状为 (370,275,210) 的 NumPy 数组，我想将其重新整形为 (275,210,370)。我将如何在 Python 中实现这一点？ 370是波段数，275是行数，210是图像包
iphone - 无法与具有子 UIViewController(带 NIB)的父 UIViewController(带 NIB)交互
我们如何与被子 UIViewController 阻止的父 UIViewController(具有按钮)交互。显然，触摸事件不会通过子 Nib 。 (启用用户交互) 注意:我正在加载默认和自定义 NI
java - storeedProcedure.registerStoredProcedureParameter，带 out Parameter ref 光标，带 Jpa Eclipse Link
我是 Jpa 新手，我想执行过程我的代码如下 private static final String PERSISTENCE_UNIT_NAME = "todos"; private static
google-compute-engine - 带 LAMP 的 GCE VS 带 Cloud SQL 的 GCE
与安装了 LAMP 的 GCE 相比，选择与 Google Cloud SQL 链接的 GCE 实例有哪些优势？我确定 GCE 是可扩展的，但是安装在其上的 mysql 数据库的可扩展性如何？使用
带*点和不带指针的Golang类型方法？
这个问题在这里已经有了答案: Value receiver vs. pointer receiver (3 个答案) 关闭 3 年前。我刚接触 golang。只是想了解为 Calc 类型声明的两种
R - 日期和分界线的快捷方式，带# -----
我不小心按了一个快捷键，一个非常漂亮的断线出现在日期上。有点像 # 23 Jun 2010 -------------------- 有人知道有问题的快捷方式吗？？ (我在 mac 上工作!) 在
scala - 带$和字符串插值的Scala正则表达式
我正在Scala中编写正则表达式 val regex = "^foo.*$".r 这很好，但是如果我想做 var x = "foo" val regex = s"""^$x.*$""".r 现在我们有
带/不带命名空间的 XML
以下 XML 文档在技术上是否相同？ James Dean 19 和: James Dean 19 最佳答案这两个文档在语义上是相同的。在 X
带 lapply 的稳健线性回归
我在对数据帧列表运行稳健的线性回归模型(使用 MASS 库中的 rlm)时遇到问题。可重现的示例: var1 <- c(1:100) var2 <- var1*var1 df1 <- data.f
iphone - 带 $ 符号的自定义数字键盘
好的，我有一个自定义数字键盘，可以在标签(numberField)中将数字显示为 0.00，现在我需要它显示 $0.00。 NSString *digit = sender.currentTitle;
macos - 带 Storyboard的基于文档的应用程序自动保存
在基于文档的应用程序中，使用 XIB 文件，创建新窗口时其行为是: 根据最后一个事件的位置进行定位和调整大小 window 。如果最后一个事件窗口仍然可见，则新窗口窗口应该是级联的，这样它就不会直
sql - 带 in 子句的查询中的参数？
我想使用参数进行查询，如下所示: SELECT * FROM MATABLE WHERE MT_ID IN (368134, 181956) 所以我考虑一下 SELECT * FROM MATABLE
sql - 带/不带参数的性能问题
我遇到一些性能问题。我有一个大约有 200 万行的表。 CREATE TABLE [dbo].[M8]( [M8_ID] [int] IDENTITY(1,1) NOT NULL,
javascript - 带 (+) 键的按键功能不起作用
我在 jquery 中的按键功能遇到问题。我不知道为什么按键功能不起作用。我已经使用了正确的 key 代码。在我的函数中有 2 个代码，其中包含 2 个事件键，按一个键表示 (+) 代码 107 和(
android - 带.raw输入的音频波形
我想显示音频波形，我得到了此代码，它需要.raw音频输入并显示音频波形，但是当我放入.3gp，.mp3音频时，我得到白噪声，有人可以帮助我如何使其按需与.3gp一起使用使用.3gp音频运行它。 Inp
php - 带$的stristr
我无法让 stristr 函数返回真值，我相信这是因为我的搜索中有一个 $ 字符。当我这样做时: var_dump($nopricecart); 完整的 $nopricecart 值是 $0 ，我得
algorithm - 带 If 语句的循环的时间复杂度
如果我有这样的循环: for(int i=0;i O(n) 次。所以do some执行了O(n)次。如果做某事是线性时间，那么代码片段的复杂度是O(n^2)。关于algorithm - 带 If 语

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - 带 Bootstrap 的两列 Accordion