javascript - 如何向嵌套的 Bootstrap Accordion 添加加号和减号-6ren

javascript - 如何向嵌套的 Bootstrap Accordion 添加加号和减号

转载作者：太空宇宙更新时间：2023-11-03 19:39:36

这个问题是相关评论的延续 How to add plus minus symbol to a bootstrap accordion

如何给嵌套的 bootstrap Accordion 添加加号和减号并使其正常工作？目前，它们没有按预期切换。

这是我试过的:http://jsfiddle.net/4t1qs0uv/2/

HTML:

<div class="panel-group" id="accordion1">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"> 
                <a data-toggle="collapse" data-parent="#accordion" href="#livingroom-10" class="collapsed">Living Room</a>
            </h4>
        </div>
        <div id="livingroom-10" class="panel-collapse collapse" style="height: 0px;">
            <div class="panel-body">
                <div class="panel-group" id="accordion2">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#add101">
                                    Air Condition
                                </a>
                            </h4>
                        </div>
                        <div id="add101" class="panel-collapse collapse">
                            <div class="panel-body">
                                <form class="form-inline" role="form">
                                    <div class="form-group">
                                        <label for="usageperday">Usage Per Day</label><br>
                                        <input type="text" class="form-control" name="usageperday-1.0.1" placeholder="Usage Per Day" value="8">
                                    </div>
                                    <div class="form-group">
                                        <label for="numbermonth">Number of days used per month</label><br>
                                        <input type="text" class="form-control" name="numbermonth-1.0.1" placeholder="Number of days used per month" value="30">
                                    </div>
                                    <div class="form-group">
                                        <label for="watts">Watts</label><br>
                                        <input type="text" class="form-control" name="watts-1.0.1" placeholder="Watts" value="1500">
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-group" id="accordion2">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#add102">
                                    Fan
                                </a>
                            </h4>
                        </div>
                        <div id="add102" class="panel-collapse collapse in">
                            <div class="panel-body">
                                <form class="form-inline" role="form">
                                    <div class="form-group">
                                        <label for="usageperday">Usage Per Day</label><br>
                                        <input type="text" class="form-control" name="usageperday-1.0.2" placeholder="Usage Per Day" value="8">
                                    </div>
                                    <div class="form-group">
                                        <label for="numbermonth">Number of days used per month</label><br>
                                        <input type="text" class="form-control" name="numbermonth-1.0.2" placeholder="Number of days used per month" value="30">
                                    </div>
                                    <div class="form-group">
                                        <label for="watts">Watts</label><br>
                                        <input type="text" class="form-control" name="watts-1.0.2" placeholder="Watts" value="90">
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#bathroom-20" class="collapsed">
                    Bathroom
                </a>
            </h4>
        </div>
        <div id="bathroom-20" class="panel-collapse collapse" style="height: 0px;">
            <div class="panel-body">
                <div class="panel-group" id="accordion2">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#add2029">
                                    Router
                                </a>
                            </h4>
                        </div>
                        <div id="add2029" class="panel-collapse collapse">
                            <div class="panel-body">
                                <form class="form-inline" role="form">
                                    <div class="form-group">
                                        <label for="usageperday">Usage Per Day</label><br>
                                        <input type="text" class="form-control" name="usageperday-2.0.29" placeholder="Usage Per Day" value="24">
                                    </div>
                                    <div class="form-group">
                                        <label for="numbermonth">Number of days used per month</label><br>
                                        <input type="text" class="form-control" name="numbermonth-2.0.29" placeholder="Number of days used per month" value="30">
                                    </div>
                                    <div class="form-group">
                                        <label for="watts">Watts</label><br>
                                        <input type="text" class="form-control" name="watts-2.0.29" placeholder="Watts" value="10">
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-group" id="accordion2">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#add2030">
                                    Scanner
                                </a>
                            </h4>
                        </div>
                        <div id="add2030" class="panel-collapse collapse">
                            <div class="panel-body">
                                <form class="form-inline" role="form">
                                    <div class="form-group">
                                        <label for="usageperday">Usage Per Day</label><br>
                                        <input type="text" class="form-control" name="usageperday-2.0.30" placeholder="Usage Per Day" value="0.1">
                                    </div>
                                    <div class="form-group">
                                        <label for="numbermonth">Number of days used per month</label><br>
                                        <input type="text" class="form-control" name="numbermonth-2.0.30" placeholder="Number of days used per month" value="2">
                                    </div>
                                    <div class="form-group">
                                        <label for="watts">Watts</label><br>
                                        <input type="text" class="form-control" name="watts-2.0.30" placeholder="Watts" value="20">
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JavaScript:

jQuery(function ($) {
    var $active = $('#accordion1 .panel-collapse.in').prev().addClass('active');
    $active.find('a').append('<span class="glyphicon glyphicon-minus pull-right"></span>');
    $('#accordion1 .panel-heading').not($active).find('a').prepend('<span class="glyphicon glyphicon-plus pull-right"></span>');
    $('#accordion1').on('show.bs.collapse', function (e) {
        $('#accordion1 .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
        $(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
    });
    $('#accordion1').on('hide.bs.collapse', function (e) {
        $(e.target).prev().removeClass('active').find('.glyphicon').removeClass('glyphicon-minus').addClass('glyphicon-plus');
    });

    var $active2 = $('#accordion2 .panel-collapse.in').prev().addClass('active');
    $active2.find('a').append('<span class="glyphicon glyphicon-minus pull-right"></span>');
    $('#accordion2 .panel-heading').not($active2).find('a').prepend('<span class="glyphicon glyphicon-plus pull-right"></span>');
    $('#accordion2').on('show.bs.collapse', function (e) {
        $('#accordion2 .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
        $(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
    });
    $('#accordion2').on('hide.bs.collapse', function (e) {
        $(e.target).prev().removeClass('active').find('.glyphicon').removeClass('glyphicon-minus').addClass('glyphicon-plus');
    });

});

最佳答案

如果您使用正确的样式和唯一 ID 实现面板组，您也可以使用 CSS 在嵌套的切换上添加指示器。不需要新的 JQuery:

演示:http://jsbin.com/zixeza/1/

CSS:

.panel-group .panel-heading a:after {
  content: '-';
  position: absolute;
  right: 20px;
  top:5px;
}
.panel-group .panel-heading a.collapsed:after {
  content: '+';
}

HTML:

<div class="container">

         <div class="panel-group" id="accordion">
         
            <div class="panel panel-default">
               <div class="panel-heading">
                  <h4 class="panel-title">
                     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                     Collapsible Group Item #1
                     </a>
                  </h4>
               </div><!--/.panel-heading -->
               <div id="collapseOne" class="panel-collapse collapse in">
                  <div class="panel-body">
                     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                  </div><!--/.panel-body -->
               </div><!--/.panel-collapse -->
            </div><!-- /.panel -->
            
            <div class="panel panel-default">
               <div class="panel-heading">
                  <h4 class="panel-title">
                     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                     Collapsible Group Item #2
                     </a>
                  </h4>
               </div><!--/.panel-heading -->
               <div id="collapseTwo" class="panel-collapse collapse">
                  <div class="panel-body">

                    <!-- nested -->


         <div class="panel-group" id="nested">
         
            <div class="panel panel-default">
               <div class="panel-heading">
                  <h4 class="panel-title">
                     <a data-toggle="collapse" data-parent="#nested" href="#nested-collapseOne">
                     Collapsible Group Item #1
                     </a>
                  </h4>
               </div><!--/.panel-heading -->
               <div id="nested-collapseOne" class="panel-collapse collapse in">
                  <div class="panel-body">
                     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                  </div><!--/.panel-body -->
               </div><!--/.panel-collapse --> 
            </div><!-- /.panel --> 
            
            <div class="panel panel-default">
               <div class="panel-heading">
                  <h4 class="panel-title">
                     <a class="collapsed" data-toggle="collapse" data-parent="#nested" href="#nested-collapseTwo">
                     Collapsible Group Item #2
                     </a>
                  </h4>
               </div><!--/.panel-heading -->
               <div id="nested-collapseTwo" class="panel-collapse collapse">
                  <div class="panel-body">
                     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                  </div><!--/.panel-body -->
               </div><!--/.panel-collapse -->
            </div><!-- /.panel -->
            
            <div class="panel panel-default">
               <div class="panel-heading">
                  <h4 class="panel-title">
                     <a class="collapsed" data-toggle="collapse" data-parent="#nested" href="#nested-collapseThree">
                     Collapsible Group Item #3
                     </a>
                  </h4>
               </div><!--/.panel-heading -->
               <div id="nested-collapseThree" class="panel-collapse collapse">
                  <div class="panel-body">
                     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                  </div><!--/.panel-body -->
               </div><!--/.panel-collapse -->
            </div><!-- /.panel -->
         </div><!-- /.panel-group -->


<!-- nested -->
                    
                     
                  </div><!--/.panel-body -->
               </div><!--/.panel-collapse -->
            </div><!-- /.panel -->
            
            <div class="panel panel-default">
               <div class="panel-heading">
                  <h4 class="panel-title">
                     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                     Collapsible Group Item #3
                     </a>
                  </h4>
               </div><!--/.panel-heading -->
               <div id="collapseThree" class="panel-collapse collapse">
                  <div class="panel-body">
                     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                  </div><!--/.panel-body -->
               </div><!--/.panel-collapse -->
            </div><!-- /.panel -->
         </div><!-- /.panel-group -->

</div><!-- /.container -->

关于javascript - 如何向嵌套的 Bootstrap Accordion 添加加号和减号，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26562687/

文章推荐： c# - (什么时候)使用 FluentAssertions 是个好主意？

文章推荐： python - wxpython:当窗口恢复时如何重绘某些内容？

文章推荐： python - 轨道评论服务器问题

文章推荐： c# - 将一组文本框控件更改为 ReadOnly = false

css - 嵌套 DIV - 嵌套 DIV 不占用高度？
所以我试图设置“内容”类的高度，但它似乎不起作用。我对嵌套 DIV 非常陌生，我已经尝试了我在谷歌搜索中发现的修复程序，但似乎没有任何效果。帮助？
php - 嵌套 View 中的 Laravel 嵌套 View
好的，所以我一直在四处寻找，但找不到这个问题的答案。但是，我需要将一个 View 嵌套在另一个 View 中。我有一个 $layout 正在使用我拥有的 default.layout Blade 文
php - 嵌套 View 中的 Laravel 嵌套 View
好的，所以我一直在四处寻找，但找不到这个问题的答案。但是，我需要将一个 View 嵌套在另一个 View 中。我有一个 $layout 正在使用我拥有的 default.layout Blade 文
java - 嵌套 <嵌套 :equal> and in combination
基本上，我的问题很简单，但它需要知道 Struts 1.1 并且还活着的人。我尝试构建的伪代码看起来像这样: IF element.method1 = true THEN IF element
java - 为 Excel 嵌套 if 语句编写 Java 嵌套 if 语句？
我正在尝试将 Excel 嵌套 IF 语句转换为代码语言，但我不确定我是否正确执行此操作，希望能得到一些帮助这是Excel语句: =IF(D3="Feather",IF(OR(I3>1000,R3=
javascript - 嵌套 ng-repeat 索引不起作用 ||嵌套 ng-click 不起作用
如果我们创建两个或三个评论并对其进行多次回复，则“有用”链接在单击时会导致问题，它会对具有相同编号的索引执行 ng-click 操作，从而显示具有相同索引的所有文本。如何解决此嵌套问题，以便在单击链接
java - 将 Scala 嵌套 Map 转换为 Java 嵌套 util.Map
我在项目中使用Scala，想与Stripe集成，但它只提供Java API。例如，要创建 session ，我使用: val params = new util.HashMap[String, Any
使用 CSS 类时，嵌套 Div 中的 HTML 嵌套 Div 不显示
以下代码有一个 Div，其中连续包含四个较小的 Div。四个 Div 中的每一个还包含一个较小的 Div，但此 Div 未显示。我尝试了各种显示和位置组合，看看 div 是否会出现。 classGoa
嵌套 for 循环的大时间复杂度
我在这里有一个问题，循环是: for (i=0; i < n; ++i) for (j = 3; j < n; ++j) { ...
python :嵌套
我正在尝试编写代码来显示具有奇数宽度的形状。形状完成后，将其放置在外部形状内。用户将能够输入用于形状的字符和行数。我希望生成一个形状，并通过 for 循环生成一个外部形状。 ***** .
jquery 嵌套 .each
$(".globalTabs").each(function(){ var $globalTabs = $(this); var parent = $globalTabs.parent
嵌套 for 循环的复杂性
关闭。此题需要details or clarity 。目前不接受答案。想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 9 年前。 Improve th
嵌套 While 循环的算法复杂度
所以我在这个问题上遇到了一些麻烦，因为变量 i。我只是不确定在第二个 while 循环中如何处理它。对于我的外循环，我知道它将运行 log_4(n^2) 次迭代。对于内部 while 循环，我计算的迭
JSON Schema 嵌套 If Then
我似乎找不到在枚举上应用多个 if/then 逻辑的工作方式。 anyOf 不应用条件逻辑，而是表示如果其中任何一个匹配则很好。 allOf 再次不应用条件逻辑，而是测试属性/必填字段的超集。这是一
Haskell(嵌套)ReaderT
如何访问 ReaderT 的内部 monad。在我的例子中，我有类型: newtype VCSSetupAction a = VCSSetupAction (ReaderT (Maybe VCSCo
excel - 嵌套 IF 以用零填充数字
这个问题在这里已经有了答案: Add leading zeroes/0's to existing Excel values to certain length (7 个回答) 7年前关闭。我正在寻
Excel 嵌套 IF 函数与 AND/OR
我已经绑定(bind)了很多 AND/OR 函数的组合并且没有运气。这是我需要创建的: 在 B 列中，我有公司 ID，范围从两个数字字符到六个数字字符。我需要在 B 列中的每个公司 ID 之前的每
vba - 嵌套 If 语句有问题
我是 VBA 新手，在尝试编写的宏中使用 If 语句时遇到了一些困难。每个月我都会收到一份 Excel 报告，其中列出了我们公司的哪些员工执行了某些任务。我正在编写的宏旨在将每个员工的数据复制并粘贴到
excel - 嵌套 IF 语句
如果在 B 列中找到单元格 A1 中的值，则使用文本 321 填充除非在 C 列中找到单元格 A1 中的值，在这种情况下填充文本 121反而。如果单元格 A1 的内容不在 B 列或 C 列中，则使用
Excel:嵌套 if 语句不删除第二个条件中的空格
我有几十万个地址。其中一些在整数之后有粒子。如 4356 A Horse Avenue , 其他格式正常4358 Horse Avenue .有些有“A”，有些有“B”。我正在尝试删除整数和粒子之间的

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何向嵌套的 Bootstrap Accordion 添加加号和减号

演示:http://jsbin.com/zixeza/1/