gpt4 book ai didi

javascript - 有没有办法简化这个jquery?

转载 作者:行者123 更新时间:2023-12-01 02:38:23 25 4
gpt4 key购买 nike

我编写了一个具有以下结构的下拉菜单。它应该在点击时下拉,并在点击时关闭。

这是 HTML

<ul id="nav" class="nav">
<li>
<a id="menu1" class="menu">MENU 1</a> <!-- top menu -->
<div id="submenu1" class="submenu"> <!-- hidden by default -->
<a href="#">SUBMENU ITEM 1</a> <!-- submenu item -->
<a href="#">SUBMENU ITEM 2</a>
</div>
</li>

<li>
<a id="menu2" class="menu">MENU 2</a>
<div id="submenu2" class="submenu">
<a href="#">SUBMENU ITEM 1</a>
<a href="#">SUBMENU ITEM 2</a>
<a href="#">SUBMENU ITEM 2</a>
</div>
</li>
</ul>

这就是 JavaScript(使用 jQuery)

$("#menu1").click(function() {
$("div.submenu").hide(); // hide all menus
$("#submenu1").toggle(); // open this menu
});
$("#menu2").click(function() {
$("div.submenu").hide(); // hide all menus
$("#submenu2").toggle(); // open this menu
});
$("#menu3").click(function() {
$("div.submenu").hide(); // hide all menus
$("#submenu3").toggle(); // open this menu
});
$("#menu4").click(function() {
$("div.submenu").hide(); // hide all menus
$("#submenu4").toggle(); // open this menu
});

$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("nav"))
$("div.submenu").hide();
});

JS 的第一部分有很多重复,有没有办法让它更短、更好、更好?

最佳答案

您应该能够将脚本缩减为:

$(".nav .menu").click(function() {
$("div.submenu").hide(); // hide all menus
$(this).next().toggle(); // open this menu
});
$(document).click(function(e) {
if (! $(e.target).parents().hasClass("nav"))
$("div.submenu").hide();
});

关于javascript - 有没有办法简化这个jquery?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1838512/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com