Bootstrap 4 Tabs внутри выпадающего меню

Question

Я использую выпадающее меню boostrap 4 с вкладками внутри.Вот код, который я нашел, эта ссылка полезна, чтобы остановить распространение события щелчка, чтобы раскрывающееся меню не закрывалось при щелчке внутри него Избегать закрывающегося раскрывающегося меню при щелчке внутри

Но нажатие на вкладки не работает.кодовый штифт: boostrap 4 вкладки внутри выпадающего меню

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