时间戳

首页 > 解决方案 > 如果 li 有一个子菜单，则阻止默认并显示阻止子链接，否则使链接可点击

jquery - 如果 li 有一个子菜单，则阻止默认并显示阻止子链接，否则使链接可点击

问题描述

在下面的菜单中，如果没有子菜单链接，我希望链接正常运行，否则父链接应防止默认，然后应在其上设置一个类，该类submenu 将显示以前隐藏的子菜单项。问题是我可能无法开始$(this).next(".submenu").toggleClass("opened");工作，因为它已经包含在本身正在引用的条件中$(this)。

在这里小提琴和下面的代码。提前致谢。

<div class="wrap">
    <ul>
        <li>
            <a href="http://test.com">top 1</a>
            <ul class="submenu">
                <li><a href="">sub 1</a></li>
                <li><a href="">sub 2</a></li>
                <li><a href="">sub 3</a></li>
            </ul>
        </li>
        <li><a href="https://google.com">top 2</a></li>
        <li><a href="https://google.com">top 3</a></li>
    </ul>
</div>

.wrap .submenu {
    display: none;
}
.submenu.opened {
    display: block;
}

if (
    $(".wrap ul li")
        .has(".submenu")
        .addClass("hasSubMenu")
);


$(".wrap ul li").click(function(e) {
    console.log("a");
    // we only want to target <li> that have a <ul> sub-menu
    if ($(this).hasClass("hasSubMenu")) {
        // first prevent default on the link
        e.preventDefault();
        console.log($(this));
        // now find .submenu and add class
        $(this)
            .next(".submenu")
            .toggleClass("opened");
    } else {
        console.log("test: no submenu");
    }
});

标签： jquery

解决方案

好吧，我想我可能有答案了。在最初$(this)我将内部存储 $(this)在一个var中。我不知道为什么这应该起作用，但它似乎都一样。

if (
    $(".wrap ul li")
        .has(".submenu")
        .addClass("hasSubMenu")
);


$(".wrap ul li").click(function(e) {
    console.log("a");
    // we only want to target <li> that have a <ul> sub-menu
    if ($(this).hasClass("hasSubMenu")) {
        var $this = $(this)
        // first prevent default on the link
        e.preventDefault();
        console.log($(this));
        // now find .submenu and add class
        $this
            .find(".submenu")
            .toggleClass("opened");
    } else {
        console.log("test: no submenu");
    }
});

推荐阅读