嵌套手风琴加/减图标 jQuery 类选择器故障

Question

我在 Bootstrap 中有嵌套的手风琴，并在标题中添加了一个加号/减号图标来切换手风琴的显示/隐藏。问题是，对于我正在使用的 jQuery 选择器，当其中一个子手风琴显示/隐藏时，加号/减号图标会发生变化——但父加号/减号图标也会发生变化。关于我在选择器上做错了什么有什么想法吗？任何帮助表示赞赏。谢谢。

结构如下：

<div class="panel-group" id="accordion1">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title"><span class="glyphicon glyphicon-minus"></span> <a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">Kiewit</a></h3>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                <div class="panel-group" id="accordion2">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title"><span class="glyphicon glyphicon-plus"></span> <a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne1">East</a></h4>
                        </div>
                        <div id="collapseOne1" class="panel-collapse collapse">
                            <div class="panel-body">Content here...</div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title"><span class="glyphicon glyphicon-minus"></span> <a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne2">West</a></h4>
                        </div>
                        <div id="collapseOne2" class="panel-collapse collapse in">
                            <div class="panel-body">Content here...</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title"><span class="glyphicon glyphicon-plus"></span> <a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">Vulcan Materials</a></h3>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">Content here...</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title"><span class="glyphicon glyphicon-plus"></span> <a data-toggle="collapse" data-parent="#accordion1" href="#collapseThree">Copper Springs</a></h3>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">Content here...</div>
        </div>
    </div>
</div>

这里是 jQuery：

$('.collapse').on('show.bs.collapse', function() {
    $(this).parent().find(".glyphicon-plus:first").removeClass("glyphicon-plus").addClass("glyphicon-minus");
  }).on('hide.bs.collapse', function() {
    $(this).parent().find(".glyphicon-minus:first").removeClass("glyphicon-minus").addClass("glyphicon-plus");
  });

Answer 1

我在嵌套手风琴的加号/减号图标中添加了“子菜单”类，停止外手风琴菜单触发隐藏事件的方法是停止传播内手风琴中触发的事件。

你可以试试

$('#accordion2 .panel-collapse').on('hidden.bs.collapse', function(event) {
    event.stopPropagation();
    $(this).prev().find(".submenu").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});

或者只是简单的return false，就像下面bootply中显示的方法

http://www.bootply.com/nLC4Mw3Vqr