我正在使用内部带有选项卡的 boostrap 4 下拉菜单。这是密码 我发现此链接对于停止单击事件传播很有用,这样下拉菜单不会在单击其中时关闭 Avoid dropdown menu close on click inside
但是点击标签不起作用。 密码:boostrap 4 tabs inside drop down menu
is there any solution or another approach so that tabs work inside drop down menu
HTML
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Navbar
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
</button>
<div id="navbarNavDropdown" class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">
Home
<span class="sr-only">
(current)
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pricing
</a>
</li>
<li class="nav-item dropdown">
<a id="navbarDropdownMenuLink" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<div class="container">
<ul id="tabs" class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a id="tab-A" class="nav-link active" role="tab" href="#pane-A" data-toggle="tab">
–A–
</a>
</li>
<li class="nav-item">
<a id="tab-B" class="nav-link" role="tab" href="#pane-B" data-toggle="tab">
–B–
</a>
</li>
<li class="nav-item">
<a id="tab-C" class="nav-link" role="tab" href="#pane-C" data-toggle="tab">
–C–
</a>
</li>
</ul>
<div id="content" class="tab-content" role="tablist">
<div id="pane-A" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="tab-A">
<div id="heading-A" class="card-header" role="tab">
<h5 class="mb-0">
<a href="#collapse-A" data-toggle="collapse" data-parent="#content" aria-expanded="true" aria-controls="collapse-A">
Collapsible Group Item A
</a>
</h5>
</div>
<div id="collapse-A" class="collapse show" role="tabpanel" aria-labelledby="heading-A">
<div class="card-body">
[Tab content A]
</div>
</div>
</div>
<div id="pane-B" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-B">
<div id="heading-B" class="card-header" role="tab">
<h5 class="mb-0">
<a class="collapsed" href="#collapse-B" data-toggle="collapse" data-parent="#content" aria-expanded="false" aria-controls="collapse-B">
Collapsible Group Item B
</a>
</h5>
</div>
<div id="collapse-B" class="collapse" role="tabpanel" aria-labelledby="heading-B">
<div class="card-body">
[Tab content B]
</div>
</div>
</div>
<div id="pane-C" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-C">
<div id="heading-C" class="card-header" role="tab">
<h5 class="mb-0">
<a class="collapsed" href="#collapse-C" data-toggle="collapse" data-parent="#content" aria-expanded="false" aria-controls="collapse-C">
Collapsible Group Item C
</a>
</h5>
</div>
<div id="collapse-C" class="collapse" role="tabpanel" aria-labelledby="heading-C">
<div class="card-body">
[Tab content C]
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
JS
$('.dropdown-menu').on("click.bs.dropdown", function (e) { e.stopPropagation(); e.preventDefault(); });
有没有可能的解决方案?
最佳答案
最简单的方法是将其包装在 form
中,因为该表单会阻止 Dropdown 在单击时关闭...
<nav>
...
<li class="nav-item dropdown">
<form>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
....
</div>
</form>
</li>
...
</nav>
https://www.codeply.com/go/GzekeuWnSg
另一种方法是使用 jQuery 来实现:
$('.dropdown-menu .nav-tabs .nav-link').on("click.bs.dropdown", function (e) {
$(this).tab('show');
e.stopPropagation();
});
关于javascript - 下拉菜单中的 Bootstrap 4 选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50588102/