Question

我有一个带有另一个面板的自举面板。两者都在面板标题中有一个glyphicon。默认情况下，面板已折叠。折叠面板时，将设置glyphicon-unchecked。当我点击这个glyphicon时，面板会展开。我为此写了以下JavaScript函数：

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

这很正常。单击此按钮时，外部面板会变形，但内部仍然会折叠。我写了方法，所以glyphicon在uncollapse中用“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");
 });

我为内部面板编写了与上面完全相同的代码。当我点击内部面板的字形时，内部面板变得未折叠并且交换了字形。但是，当我再次点击内部面板的字形时，内部面板会折叠，内部面板和外部面板的字形都会被交换。我只想在单击内部面板的glyphicon时交换内部面板字形。

这是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");
});

Answer 2

史蒂夫哈里斯的答案确实有效，但他用错误的方法写了。以下是切换字形的新方法：

$('#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");
});

非常感谢您的快速帮助！

面板中的Bootstrap面板：单击内部面板时两个glyphicons切换

2 个答案: