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

Question

I have an html navigation menu that opens sub menus on a click like so...

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

I'd like to achieve the same thing on hover, but it doesn't work. It either doesn't leave the sub menu open or a variety of other things, this is one obvious this I've tried:

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

I also tried:

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

Any help would be appreciated.

Edit: Here's some of the 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>

Here's how I closed the menu when the mouse left the menu:

$('.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

Maybe try :

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

You might also want to have a look at some of those jQuery selectors you're using in your snippet there - perhaps some classes on the elements if you're able to add them, rather than the nested selectors, and caching them in variables will be better for performance ,and re-use.

Answer 2

Try the below code:

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

You can write or customize the same when you want to hide or slideUp the submenus.

Hope this helps!

Answer 3

You can use multiple events with the on method in jquery:

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