![](/img/trans.png)
[英]In Bootstrap V5, How to prevent accordion from toggling when element in header is clicked?
[英]How to prevent accordion from toggling when button in header is clicked?
我正在使用bootstrap的手风琴类,并希望在标题中有按钮可以点击而不切换手风琴。 这是HTML示例:
<div class="body">
<div class="panel panel-default" style="width: 80%">
<div class="panel-heading" data-toggle="collapse" data-target="#container1" style="cursor: pointer;">
<h4 class="panel-title" style="display: inline-block;">
title
</h4>
<div style="float: right; width: 130px; text-align: right;"><span style="color: red;">test</span></div>
<button type="button" class="btn btn-xs btn-primary" style="float: right;" onclick="foo(event);">Button</button>
</div>
<div id="container1" class="panel-collapse collapse">
<div class="panel-body">
panel content
</div>
</div>
</div>
</div>
我尝试使用带有e.preventDefault();
的onclick
处理程序e.preventDefault();
阻止手风琴触发,但它不起作用:
window.foo = function(e) {
console.log("foo");
$(".body").append("<br>foo");
e.preventDefault();
}
如何在单击按钮时阻止手风琴触发?
您想要停止事件冒泡,因此您使用stopPropagation
:
window.foo = function(e) {
e.stopPropagation();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.