如何保持子菜单打开而无需单击

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选择器-如果可以添加元素，则可以添加元素上的一些类，而不是嵌套选择器，并将它们缓存在变量中更好地提高性能，并重复使用。

Answer 2

试试下面的代码：

$("#nav_evnavmenu > li > a").on('mouseenter', 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);
        }
    }
});

要隐藏或滑动子菜单时，可以编写或自定义它们。

希望这可以帮助！

Answer 3

您可以在jquery中使用on方法使用多个事件：

$('#nav_evnavmenu > li > a').on({
    'click mouseover': function(e) {
        e.stopPropagation();
       // do your action on mouseover and click
    },
    'mouseout': function(e) {
        e.stopPropagation();
        // do your action for when mouse leaves element
        $("#nav_evnavmenu .selected div div").slideUp(100);
        $("#nav_evnavmenu .selected").removeClass("selected");
    }
});