我有两个下拉菜单 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>
目前输出是这样的。
其实我想要这样。
答案 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>