Question

我在Bootstrap中有嵌套手风琴，并在标题上添加了一个加号/减号图标来切换手风琴show / hide。问题是我使用的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

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

你可以尝试

$('#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

Answer 2

我认为这会帮助您==>

copy_to_user()

有关更多详细信息，请查看我的博客- https://codekhel.blogspot.com/2018/10/nested-accordion-with-another-jquery.html

嵌套的Accordion Plus / Minus图标jQuery类选择器麻烦

2 个答案: