javascript - 面板 : Both glyphicons toggle when inner panel is clicked 中的 Bootstrap 面板

Question

我有一个 Bootstrap 面板，里面有另一个面板。两者在面板标题中都有一个字形图标。默认情况下，面板是折叠的。当面板折叠时，将设置 glyphicon-unchecked。当我点击这个字形图标时，面板展开。我为此编写了以下 JavaScript 函数:

$('#outerPanelGlyph').click(function () {
    $('#outerPanelBody').collapse('toggle');
});

这工作正常。当我单击它时，外面板未折叠但内面板仍折叠。我写了方法，所以字形在展开时与“glyphicon-check”交换，反之亦然:

$('#outerPanelBody').on('show.bs.collapse', function () {
    $('#outerPanelGlyph').removeClass("glyphicon-unchecked").addClass("glyphicon-check");
});

$('#outerPanelBody').on('hide.bs.collapse', function () {
    $('#outerPanelGlyph').removeClass("glyphicon-check").addClass("glyphicon-unchecked");
 });

我为内部面板编写了与上面完全相同的代码。当我单击内部面板的字形时，内部面板展开并交换字形。但是，当我再次单击内部面板的字形时，内部面板会折叠，内部面板和外部面板的字形都会交换。我只想在单击内部面板的字形图标时交换内部面板字形。

这是 HTML 代码:

<div class="panel panel-dark" id="outerPanel">
    <div class="panel-heading">
        <span class="pull-right"><i class="glyphicon glyphicon-unchecked" id="outerPanelGlyph"></i></span>
    </div>
        ....some code....
    <div class="collapse panel-body" id="outerPanelBody">
        <div class="panel panel-default" id="innerPanel">
            <div class="panel-heading panel-dark">
                <span class="pull-right"><i class="glyphicon glyphicon-unchecked" id="innerPanelGlyph"></i></span>
            </div>
            <div class="collapse panel-body" id="innerPanelBody">
                ....some code....
            </div>
        </div>
    </div>
</div>

Answer 1

当您单击内部面板时，您还会单击外部面板，因此您需要停止内部面板单击事件中的传播，否则两个事件都将被触发。

$('#outerPanelBody').on('show.bs.collapse', function (e) {
    e.stopPropagation();
    $('#outerPanelGlyph').removeClass("glyphicon-unchecked").addClass("glyphicon-check");
});

$('#outerPanelBody').on('hide.bs.collapse', function (e) {
    e.stopPropagation();
    $('#outerPanelGlyph').removeClass("glyphicon-check").addClass("glyphicon-unchecked");
});