javascript - 如何在不单击的情况下保持子菜单打开

Question

我有一个 html 导航菜单，单击即可打开子菜单，如下所示...

$("#nav_evnavmenu > li > a").click(function () { // binding onclick
    if ($(this).parent().hasClass('selected')) {
        $("#nav_evnavmenu .selected div div").slideUp(100); // hiding popups
        $("#nav_evnavmenu .selected").removeClass("selected");
    } else {
        $("#nav_evnavmenu .selected div div").slideUp(100); // hiding popups
        $("#nav_evnavmenu .selected").removeClass("selected");

        if ($(this).next(".subs").length) {
            $(this).parent().addClass("selected"); // display popup
            $(this).next(".subs").children().slideDown(200);
        }
    }
}); 

我想在悬停时实现同样的目标，但它不起作用。它要么不打开子菜单，要么不打开其他各种东西，这是我尝试过的一个明显的方法:

$("#nav_evnavmenu > li > a").hover(function () { // detect hover
    if ($(this).parent().hasClass('selected')) {
        $("#nav_evnavmenu .selected div div").slideUp(100); // hiding popups
        $("#nav_evnavmenu .selected").removeClass("selected");
    } else {
        $("#nav_evnavmenu .selected div div").slideUp(100); // hiding popups
        $("#nav_evnavmenu .selected").removeClass("selected");

        if ($(this).next(".subs").length) {
            $(this).parent().addClass("selected"); // display popup
            $(this).next(".subs").children().slideDown(200);
        }
    }
}); 

我也尝试过:

$("#nav_evnavmenu > li > a").hover(function () { // detect hover
    $(this).click();
}); 

如有任何帮助，我们将不胜感激。

编辑:以下是一些 HTML:

<div class="menu_evnavmenu">
    <span>
        <ul id="nav_evnavmenu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Menu 1</a>
                <div class="subs">
                    <div class="wrp2">
                        <ul>
                            <li><h3>1</h3>
                                <ul>
                                    <li>1</li>
                                    <li>2</li>
                                </ul>
                            </li>
                        </ul>
                        <p class="sep"></p>
                        <ul>
                            <li><h3>2</h3>
                                <ul>
                                    <li>1</li>
                                    <li>2</li>
                                </ul>
                            </li>
                            <li><h3>3</h3>
                                <ul>
                                    <li>1</li>
                                    <li>2</li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
            <li><a href="#">Menu 2</a>
                <div class="subs">
                    <div class="wrp2">
                        <ul>
                            <li><h3>1</h3>
                                <ul>
                                    <li>1</li>
                                    <li>2</li>
                                </ul>
                            </li>
                        </ul>
                        <p class="sep"></p>
                        <ul>
                            <li><h3>2</h3>
                                <ul>
                                    <li>1</li>
                                    <li>2</li>
                                </ul>
                            </li>
                            <li><h3>3</h3>
                                <ul>
                                    <li>1</li>
                                    <li>2</li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
    </span>
</div>

以下是当鼠标离开菜单时我关闭菜单的方法:

$('.wrp2').on('mouseleave', function(e) { // close menu on mouseout
        $("#nav_evnavmenu .selected div div").slideUp(100); // hiding popups
        $("#nav_evnavmenu .selected").removeClass("selected");
});

Answer 1

也许可以尝试:

$('#nav_evnavmenu > li > a').on('mouseover click', function(e) {
    e.stopPropagation();
    // do your action on mouseover and click
});

您可能还想看看您在代码片段中使用的一些 jQuery 选择器 - 如果您能够添加它们，也许是元素上的一些类，而不是嵌套选择器，并缓存它们变量中的性能和重用会更好。