jQuery切换子菜单

Question

我需要一些帮助。我尝试使用jQuery创建一个切换子菜单。但是，当我单击父li时，子菜单只会显示几秒钟然后消失。

以下是代码：

<div class="menu">
    <ul>
    <li class="parent">
        <a href="">Hello</a>

        <ul class="submenu">
            <li>
                <a href="">Hello</a>
            </li>
            <li>
                <a href="">Hello</a>
            </li>
        </ul>
    </li>
    <li class="parent">
        <a href="">Hello</a>

        <ul class="submenu">
            <li>
                <a href="">Hello</a>
            </li>
            <li>
                <a href="">Hello</a>
            </li>
        </ul>
    </li>

    </ul>
</div>

这是jQuery代码

$(function() {
  $(".submenu").hide();

  $(".parent").click(function(){
  $(".submenu").toggle()
});
});

Answer 1

将this用于当前所选元素，将find用于dom中的特定类

$(function () {
    $(".submenu").hide();
        $(".parent").click(function (e) {
        e.preventDefault(); // If you need to stop default action 
        $(".submenu", this).toggle(); // OR $(this).find(".submenu").toggle(); 
      });
});

DEMO

尝试发表评论

$(function () {
    $(".submenu").hide();
    $(".parent").click(function (e) {
        e.preventDefault();
        if (!$(e.target).closest("ul").is(".submenu")) {
            $(".submenu", this).toggle();
        }
    });
});

DEMO

$(function () {
    $(".submenu").hide();
    $(".parent").click(function (e) {
        e.preventDefault();
        if (!$(e.target).closest("ul").is(".submenu")) {
            $(".submenu", this).toggle();
            $(this).siblings(".parent").find(".submenu").hide();
        }
    });
});

NEW Demo

Answer 2

尝试将此作为上下文传递给选择器

$(function () {
    $(".submenu").hide();
    $(".parent").click(function (e) {
        $(".submenu:first", this).toggle();
        return false;
    });
});

在这种情况下，我们需要同时调用.preventDefault()和.stopPropagation()。因此，我建议您使用return false执行这两项操作。

DEMO

---

$(function () {
    $(".parent a").click(function (e) {
        var elems = $(this).closest('li');
        if (elems.find('.submenu').length) {
            $(".submenu:first", elems).toggle();
        }
        return false;
    });
});

DEMO

---

对于您的新要求，请使用以下代码

$(function () {
    $(".submenu").hide();
    $(".parent a").click(function (e) {
        var elems = $(this).closest('li');
        elems.siblings('li').find('ul').hide();
        if (elems.find('.submenu').length) {
            $(".submenu:first", elems).toggle();
        }
        return false;
    });
});

DEMO NEW