有没有一种方法可以简化此jQuery? [英] Is there a way to simplify this jquery?

问题描述

我写了一个具有以下结构的下拉菜单.应该在点击时下拉，然后在点击时关闭.

I wrote a dropdown menu with the following structure. It is supposed to drop down on click, and close on click.

这是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)

And that's the JavaScript (using 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的第一部分有很多重复之处，有没有办法使它更短，更好，更好?

There is a lot of repetition in the first part of the JS, is there a way to make this shorter, nicer, better?

推荐答案

您应该可以将脚本缩小为:

You should be able to reduce the script to:

$(".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();
});

这篇关于有没有一种方法可以简化此jQuery?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！