jQuery menu wont stay open

Question

I have a problem with Jquery horizontal menu staying open. Could anyone give me a hint ? If you open the submenu, I want it to stay open until you "mouseleave" the area.

JS

$(document).ready(function () {
    $("#meist").mouseleave(function () {
        $("#submeist").hide();
        return false;
    });

    $("#meist").mouseenter(function () {
        $("#submeist").show();
        return false;
    });

    $("#seadmed").mouseleave(function () {
        $("#subseadmed").hide();
        return false;
    });

    $("#seadmed").mouseenter(function () {
        $("#subseadmed").show();
        return false;
    });
});

HTML

    <ul id="menüü">  
            <li id="meist">  
                <p><a href="meist.html">Meist</a></p>  
            </li> 
            <li id="seadmed">  
                <p><a href="seadmed.html">Seadmed</a></p>  
            </li> 
           <li id="tooted">  
                <p><a href="tooted.html">Tooted</a></p>  
            <li id="hooldus">  
                <p><a href="tooted.html">Tooted</a></p> 
            </li>
         <li id="kontakt">  
                <p><a href="kontakt.html">Kontakt</a></p> 
            </li>
        </ul>

<div id="submenu">
    <ul id="submeist">
        <li class="asi1">
            Asi 1
        </li>
        <li class="asi2">
            Asi 2
        </li>
        <li class="asi3">
            Asi 3
        </li>
    </ul>

    <ul id="subseadmed">
        <li class="item1"> 
            Item 1 </li>
        <li class="item2"> 
            Item 2 
        </li>
        <li class="item3"> 
            Item 3 
        </li>
    </ul>
</div>

Karl-André Gagnon · Answer 1 · 2013-06-03T19:18:43.853

2

Since your submenus are not children of you menu, you should try to change every bindind to that :

$('#menu, #submenu').hover(fnOnHover, fnOnOut)

Take a look at jQuery hover information.

If that does not work out, please post some URL.

edited Jun 03 '13 at 19:18

answered Jun 03 '13 at 19:07

Karl-André Gagnon

33,662
5
50
75

score 1 · Answer 2 · edited May 23 '17 at 12:31

1

Change mouseenter to mouseover.

Here an answer showing the behavior: Jquery mouseenter() vs mouseover()

edited May 23 '17 at 12:31

Community

1
1

answered Jun 03 '13 at 19:06

BrunoLM

97,872
84
296
452

I had to delete the "hide" functions and leave the Mouseenter. But thanks for the tip. – VonHornmeister Jun 03 '13 at 19:11

score 1 · Accepted Answer · answered Jun 03 '13 at 19:25

Arrange your submenus inside the main menu item, Suggest you not to go with ids you will end up creating ids for each menu and submenu and handlers for each of them. Use a class and just a single handler instead of creating multiple handlers for each.

Html

<ul id="menüü">
    <li class="menu">
        <p><a href="meist.html">Meist</a>

        </p>
        <ul class="submenu">
            <li class="asi1">Asi 1</li>
            <li class="asi2">Asi 2</li>
            <li class="asi3">Asi 3</li>
        </ul>
    </li>
    <li class="menu">
        <p><a href="seadmed.html">Seadmed</a>

        </p>
        <ul class="submenu">
            <li class="item1">Item 1</li>
            <li class="item2">Item 2</li>
            <li class="item3">Item 3</li>
        </ul>
    </li>

JS

$(document).ready(function () {
    $(".menu").on('mouseenter mouseleave', function () { // Same as $(".menu").hover(...
        $(this).find(".submenu").toggle();
   });
});

Demo

Style your menu items accordingly.

One question tho'. I cant understand the jQuery part very well that you have written. How can I add more submenus and Menus ? — VonHornmeister, Jun 03 '13 at 19:47
Just repeat the menus and submenus as it is now. The handler will take care of it. All it does is when you hover it looks for submenu inside that menu and toggles it. i.e show/hide it based on its previous state. See this http://api.jquery.com/toggle/ — PSL, Jun 03 '13 at 19:49
I copied it, but it still wont work.. It works in fiddle. Any hints or tips ? — VonHornmeister, Jun 04 '13 at 07:04

jQuery menu wont stay open

3 Answers3

Html

JS

Demo