cuốn sách gpt4 ai đã làm

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

In lại Tác giả: Walker 123 更新时间:2023-11-28 06:36:09 29 4
mua khóa gpt4 Nike

我有一个 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 代码:





....some code....






....some code....




câu trả lời hay nhất

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

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

关于javascript - 面板 : Both glyphicons toggle when inner panel is clicked 中的 Bootstrap 面板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34672661/

29 4 0
Đề xuất bài viết: c++ - 如何跟踪单链表的开头?
Đề xuất bài viết: ios - 初始化大量实例
Đề xuất bài viết: C++ 类型修饰符顺序
Đề xuất bài viết: ios - 如何在 Swift 中设置初始 map 位置?
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress