Bootstrap 4:如何创建一个带有手风琴的下拉菜单? [英] Bootstrap 4: How to create a dropdown menu with an accordion inside it?
问题描述
我实际上在使自举式手风琴在下拉菜单中工作时遇到一些问题。
我搜索了很多,还在这里找到了一些StackOverflow线程,但是它们已经使用了几年了,具体取决于引导程序3或引导程序2。
在这里像这样: Twitter引导程序:如何使用手风琴创建下拉按钮
I am actually facing some problems to get an bootstrap accordion working inside a dropdown menu. I googled a lot and also find some StackOverflow threads here, but they are several years old and depending on bootstrap 3 or bootstrap 2. Like this one here: Twitter Bootstrap: How to create a dropdown button with an accordion inside it?
任何人都可以在这里帮助我,或者在Bootstrap下拉菜单中找到适用于手风琴的解决方案。
Can anybody help me here or have a solution for a working accordion inside a bootstrap dropdown menu.
<nav class="navbar navbar-expand-md">
<ul class="navbar-nav">
<li class="nav-item mega-dropdown-menu">
<a class="nav-link" href="#" id="dropdown01"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Test</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<nav class="navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">Accordion</a>
<div id="collapseExample" class="collapse">
<ul class="navbar-nav">
<li class="nav-link">
<a class="nav-link" href="#">
Accordion Link 1
</a>
</li>
<li class="nav-link">
<a class="nav-link" href="#">
Accordion Link 2
</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</li>
</ul>
</nav>
推荐答案
使Navbar下拉菜单保持打开状态的技巧是使用< form>
标签。因此,如果将手风琴放在< form>
内,它将按需要工作。
The trick to keeping the Navbar dropdown open on click is to use a <form>
tag. Therefore if you place the accordion inside a <form>
it will work as desired.
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu">
<form class="accordion" id="accordionExample">
<div>
<a class="nav-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Item #1
</a>
<div id="collapseOne" class="collapse px-3 show" data-parent="#accordionExample">
Collapse 1 content
</div>
</div>
<div>
<a class="nav-link" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Item #2
</a>
<div id="collapseTwo" class="collapse px-3" data-parent="#accordionExample">
Collapse 2 content...
</div>
</div>
<div>
<a class="nav-link" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Item #3
</a>
<div id="collapseThree" class="collapse px-3" data-parent="#accordionExample">
Collapse 3 content...
</div>
</div>
</form>
</div>
</li>
</ul>
</div>
演示: https://www.codeply.com/go/F8iQy0MeLa
这篇关于Bootstrap 4:如何创建一个带有手风琴的下拉菜单?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!