javascript - Bootstrap 4 Tabs inside drop-down menu - Stack Overflow

admin管理员组

文章数量:1415684

I am using boostrap 4 drop down menu with tabs inside. Here is the codepin I found this link useful to stop click event propagation so that the drop down menu does not close on click inside itAvoid dropdown menu close on click inside

But clicking on tabs does not work. code pin: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(); });

---

Is there possible solution ?

I am using boostrap 4 drop down menu with tabs inside. Here is the codepin I found this link useful to stop click event propagation so that the drop down menu does not close on click inside itAvoid dropdown menu close on click inside

But clicking on tabs does not work. code pin: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(); });

---

Is there possible solution ?

• javascript
• jquery
• twitter-bootstrap
• css
• bootstrap-4

Share Improve this question Follow edited Aug 9, 2018 at 11:30 Carol Skelly 363k9292 gold badges737737 silver badges647647 bronze badges asked May 29, 2018 at 15:33 ElhawElhaw 32544 silver badges1818 bronze badges 1

• 2 @ZimSystem added it – Elhaw Commented May 29, 2018 at 15:50

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

The simplest way is to wrap it inside a form since the form will prevent the Dropdown from closing on click...

<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./go/GzekeuWnSg

The other method is using jQuery to like this:

$('.dropdown-menu .nav-tabs .nav-link').on("click.bs.dropdown", function (e) { 
    $(this).tab('show'); 
    e.stopPropagation(); 
});

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

本文标签： javascriptBootstrap 4 Tabs inside dropdown menuStack Overflow