在引导程序中打开另一个菜单时关闭下拉菜单
我有两个下拉菜单 residential 和 utility。当我点击 residential 打开时，它保持打开状态，但当我点击 utility 时，我希望 residential 自动关闭。
以下是我的代码
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/121f02bcc5.js" crossorigin="anonymous"></script>
<title>Hello, world!</title>
</head>
<body>
<li class="active dropright">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i>
Residential
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
<a href="#">Rami Villa</a>
</li>
<li>
<a href="#">Alpine Metals Jafza</a>
</li>
<li>
<a href="#">Home 3</a>
</li>
</ul>
</li>
<li class="active dropright">
<a href="#utilitySubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i>
Utility
</a>
<ul class="collapse list-unstyled" id="utilitySubmenu">
<li>
<a href="#">Future Pipes</a>
</li>
<li>
<a href="#">Future Scaffolding</a>
</li>
<li>
<a href="#">Future Electricity</a>
</li>
</ul>
</li>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>
目前输出是这样的。
其实我想要这样。
5 个答案:
答案 0 :(得分：1)
要制作折叠效果，请使用此 jquery 代码。此代码通过方法 show 删除类 removeClass()。
另外，将最上面的 <li> 标签包裹在 <ul> 标签中。否则，此 html 无效。
$(".dropdown-toggle").on("click", function () {
$(".collapse.show").removeClass("show");
});<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/121f02bcc5.js" crossorigin="anonymous"></script>
<body>
<ul>
<li class="active dropright">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i>
Residential
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
<a href="#">Rami Villa</a>
</li>
<li>
<a href="#">Alpine Metals Jafza</a>
</li>
<li>
<a href="#">Home 3</a>
</li>
</ul>
</li>
<li class="active dropright">
<a href="#utilitySubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i>
Utility
</a>
<ul class="collapse list-unstyled" id="utilitySubmenu">
<li>
<a href="#">Future Pipes</a>
</li>
<li>
<a href="#">Future Scaffolding</a>
</li>
<li>
<a href="#">Future Electricity</a>
</li>
</ul>
</li>
</ul>
</body>答案 1 :(得分：1)
这里是没有jquery的代码。仅使用引导程序
<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="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="homeSubmenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Residential
</a>
<div class="dropdown-menu" aria-labelledby="homeSubmenu">
<a class="dropdown-item" href="#">Rami Villa</a>
<a class="dropdown-item" href="#">Alpine Metals Jafza</a>
<a class="dropdown-item" href="#">Home 3</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="utilitySubmenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Utility
</a>
<div class="dropdown-menu" aria-labelledby="utilitySubmenu">
<a class="dropdown-item" href="#">Future Pipes</a>
<a class="dropdown-item" href="#">Future Scaffolding</a>
<a class="dropdown-item" href="#">Future Electricity</a>
</div>
</li>
</ul>
</div>
</nav>
答案 2 :(得分：1)
我对您的代码进行了一些更改，试试这个，希望这对您有用。
<div id="accordion">
<li class="active dropright">
<button class="btn btn-link" data-toggle="collapse" data-target="#homeSubmenu" aria-expanded="true" aria-controls="collapseOne">
residential
</button>
<ul class="collapse list-unstyled" id="homeSubmenu" data-parent="#accordion">
<li>
<a href="#">Rami Villa</a>
</li>
<li>
<a href="#">Alpine Metals Jafza</a>
</li>
<li>
<a href="#">Home 3</a>
</li>
</ul>
</li>
<li class="active dropright">
<button class="btn btn-link" data-toggle="collapse" data-target="#utilitySubmenu" aria-expanded="true" aria-controls="collapseOne">
Utility
</button>
<ul class="collapse list-unstyled" id="utilitySubmenu" data-parent="#accordion">
<li>
<a href="#">Future Pipes</a>
</li>
<li>
<a href="#">Future Scaffolding</a>
</li>
<li>
<a href="#">Future Electricity</a>
</li>
</ul>
</li>
</div>
答案 3 :(得分：0)
我写了一个代码希望它对你有用：
$('.dropdowns').on('show.bs.dropdown', function () {
var currentDropdown = $(this);
$('.dropdowns').each(function () {
if($(this) !== currentDropdown && $(this).hasClass('open')) {
$(this).dropdown('toggle')
}
})
})
答案 4 :(得分：0)
您可以使用 .not() 方法排除点击的 dropdown-toggle 然后使用相同的删除类并将 attr 添加到元素。
演示代码：
//onclick of dropdown
$(".dropdown-toggle").on("click", function() {
//change attr of other..
$(".dropdown-toggle").not(this).attr("aria-expanded", "false")
//addclass of other..
$(".dropdown-toggle").not(this).addClass("collapsed")
//remove show class from others
$(".list-unstyled").not($(this).next("ul")).removeClass("show")
})<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/121f02bcc5.js"></script>
<ul>
<li class="active dropright">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i> Residential
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
<a href="#">Rami Villa</a>
</li>
<li>
<a href="#">Alpine Metals Jafza</a>
</li>
<li>
<a href="#">Home 3</a>
</li>
</ul>
</li>
<li class="active dropright">
<a href="#utilitySubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i> Utility
</a>
<ul class="collapse list-unstyled" id="utilitySubmenu">
<li>
<a href="#">Future Pipes</a>
</li>
<li>
<a href="#">Future Scaffolding</a>
</li>
<li>
<a href="#">Future Electricity</a>
</li>
</ul>
</li>
<li class="active dropright">
<a href="#utilitySubmenu2" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i> Utilit4y
</a>
<ul class="collapse list-unstyled" id="utilitySubmenu2">
<li>
<a href="#">Future Pipes2</a>
</li>
<li>
<a href="#">Future Scaffo2lding</a>
</li>
<li>
<a href="#">Future Electri2city</a>
</li>
</ul>
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？