Bootstrap 4 下拉菜单中的选项卡

Question

我正在使用带有选项卡的 boostrap 4 下拉菜单。这是代码销我发现此链接对于停止单击事件传播很有用，以便下拉菜单在单击内部时不会关闭避免下拉菜单在单击内部时关闭

但点击选项卡不起作用。代码引脚：boostrap 下拉菜单内的 4 个选项卡

is there any solution or another approach so that tabs work inside drop down menu 

---

超文本标记语言

<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">
                                 &ndash;A&ndash;
                            </a>
                        </li>
                        <li class="nav-item">
                            <a id="tab-B" class="nav-link" role="tab" href="#pane-B" data-toggle="tab">
                                 &ndash;B&ndash;
                            </a>
                        </li>
                        <li class="nav-item">
                            <a id="tab-C" class="nav-link" role="tab" href="#pane-C" data-toggle="tab">
                                 &ndash;C&ndash;
                            </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(); });

---

有可能的解决方案吗？

Answer 1

最简单的方法是将其包装在 a 内form，因为表单将阻止下拉菜单在单击时关闭...

<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(); 
});

https://www.codeply.com/go/iEDxVGTzAZ