使用 css/javascript 的下拉菜单未删除活动下拉菜单
Dropdown menu using css/javascript not removing active dropdown
我有一个下拉菜单,单击它会显示列表项的子菜单。
一切都很好,除了 PARENT 2 子菜单,如果处于活动状态,如果我单击带有下拉菜单的 PARENT 3 link,则不会关闭。
$(function () {
$('nav ul li a:not(:only-child)').click(function (e) {
$(this).siblings('.nav-dropdown').toggle();
$('.dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
$('html').click(function () {
$('.nav-dropdown').hide();
});
});
因此,如果我单击 PARENT 2,则会出现下拉列表。如果我然后单击 PARENT 3,它的下拉菜单也会出现(我需要 PARENT 2 下拉菜单消失)。如何确保单击任何菜单项都会删除打开的子菜单的任何实例?
<nav>
<ul class="nav_links">
<li><a href="#">Parent 1</a></li>
<li><a href="#">Parent 2</a>
<ul class="nav-dropdown">
<li>
<a href="#">Child 1</a>
</li>
<li>
<a href="#">Child 2</a>
</li>
</ul>
</li>
<li><a href="#">Parent 3<i class="fa-solid fa-angle-down"></i></a>
<ul class="nav-dropdown">
<li>
<a href="#">Child 1</a>
</li>
<li>
<a href="#">Child 2</a>
</li>
</ul>
</li>
<li><a href="#">Parent 4</a></li>
</ul>
</nav>
您的问题是 class dropdown
没有任何元素。
所以$('.dropdown').not($(this).siblings()).hide();
没用。
试试这个:
$(function() {
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
$('html').click(function() {
$('.nav-dropdown').hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<ul class="nav_links">
<li><a href="#">Parent 1</a></li>
<li><a href="#">Parent 2</a>
<ul class="nav-dropdown">
<li>
<a href="#">Child 1</a>
</li>
<li>
<a href="#">Child 2</a>
</li>
</ul>
</li>
<li><a href="#">Parent 3<i class="fa-solid fa-angle-down"></i></a>
<ul class="nav-dropdown">
<li>
<a href="#">Child 1</a>
</li>
<li>
<a href="#">Child 2</a>
</li>
</ul>
</li>
<li><a href="#">Parent 4</a></li>
</ul>
</nav>
我有一个下拉菜单,单击它会显示列表项的子菜单。 一切都很好,除了 PARENT 2 子菜单,如果处于活动状态,如果我单击带有下拉菜单的 PARENT 3 link,则不会关闭。
$(function () {
$('nav ul li a:not(:only-child)').click(function (e) {
$(this).siblings('.nav-dropdown').toggle();
$('.dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
$('html').click(function () {
$('.nav-dropdown').hide();
});
});
因此,如果我单击 PARENT 2,则会出现下拉列表。如果我然后单击 PARENT 3,它的下拉菜单也会出现(我需要 PARENT 2 下拉菜单消失)。如何确保单击任何菜单项都会删除打开的子菜单的任何实例?
<nav>
<ul class="nav_links">
<li><a href="#">Parent 1</a></li>
<li><a href="#">Parent 2</a>
<ul class="nav-dropdown">
<li>
<a href="#">Child 1</a>
</li>
<li>
<a href="#">Child 2</a>
</li>
</ul>
</li>
<li><a href="#">Parent 3<i class="fa-solid fa-angle-down"></i></a>
<ul class="nav-dropdown">
<li>
<a href="#">Child 1</a>
</li>
<li>
<a href="#">Child 2</a>
</li>
</ul>
</li>
<li><a href="#">Parent 4</a></li>
</ul>
</nav>
您的问题是 class dropdown
没有任何元素。
所以$('.dropdown').not($(this).siblings()).hide();
没用。
试试这个:
$(function() {
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
$('html').click(function() {
$('.nav-dropdown').hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<ul class="nav_links">
<li><a href="#">Parent 1</a></li>
<li><a href="#">Parent 2</a>
<ul class="nav-dropdown">
<li>
<a href="#">Child 1</a>
</li>
<li>
<a href="#">Child 2</a>
</li>
</ul>
</li>
<li><a href="#">Parent 3<i class="fa-solid fa-angle-down"></i></a>
<ul class="nav-dropdown">
<li>
<a href="#">Child 1</a>
</li>
<li>
<a href="#">Child 2</a>
</li>
</ul>
</li>
<li><a href="#">Parent 4</a></li>
</ul>
</nav>