下拉菜单中的 Bootstrap 4 选项卡

Question

我正在使用带有标签的 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">
                                 &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

最简单的方法是将其包装在 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