1

I was using the menu function from jQuery-ui. See my example fiddle

My problem is that when you mouse-over a menu and you exit, all submenu exits too. But when you are in a submenu and you leave, the submenu will stay open. it won't close until you click outside the menu

I tried to add this code but it won't work :

$("#menu").mouseleave( function(){
   $(".ui-menu-item").collapseAll();
});

I want the submenu to disappear too once I leave with the mouse

bpeterson76
  • 12,918
  • 5
  • 49
  • 82
Roland Feghaly
  • 27
  • 1
  • 7

2 Answers2

2

UPDATE:

I found better documentation at http://api.jqueryui.com/menu/ and it seems like you want to use the collapseAll method on mouseleave. Updated fiddle here: http://jsfiddle.net/FwBNE/7/

$(document).ready(function() {
    var menu = $("ul.menu").menu();
    $(menu).mouseleave(function () {
        menu.menu('collapseAll');
    });
});​

ORIGINAL:

This seems to work:

$(document).ready(function() {
    var menu = $("div#menu > ul.menu").menu();
    menu.menu('widget').hide();
    $('div#menu').hover(function () {
        menu.menu('widget').show();
    }, function () {
        menu.menu('widget').hide();
    });
    $(menu).hover(function () {
        menu.menu('widget').show();
    }, function () {
        menu.menu('widget').hide();
    });
});​

Updated fiddle: http://jsfiddle.net/FwBNE/4/

pete
  • 24,141
  • 4
  • 37
  • 51
  • i appreciate ur help , but why did u hide the first menu , cant we do the same with the first menu always shown ? – Roland Feghaly Oct 29 '12 at 12:15
  • i did some changes on urs , http://jsfiddle.net/GdBTc/1/ , but still have one pro , if u leave , the border will still be on menu – Roland Feghaly Oct 29 '12 at 12:54
  • If you want the first menu always open, then your original fiddle (http://jsfiddle.net/FwBNE/) does what you want (in Chrome, anyway). Is there a particular browser you're seeing this problem in? – pete Oct 29 '12 at 13:19
  • try to mouse over on menu3 and mouse out , u can see that the sebmenu of menu3 will stay open , so after u leave the menu, the submenu will stay open – Roland Feghaly Oct 30 '12 at 06:15
2

I think this will helpful for you.

Add the class submenu for <ul> tag.

HTML

<ul id="menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a>
        <ul class="submenu">
            <li><a href="#">Item 3-1</a></li>
            <li><a href="#">Item 3-2</a></li>
            <li><a href="#">Item 3-3</a></li>
            <li><a href="#">Item 3-4</a></li>
            <li><a href="#">Item 3-5</a></li>
        </ul>
    </li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
</ul>

JQuery

$(".submenu").mouseout( function(){
   $(".submenu").hide();
});
$(".submenu").mouseover( function(){
   $(".submenu").show();
});

Demo Url : http://api.jquery.com/mouseout/

Mohammed Nagoor
  • 884
  • 2
  • 12
  • 25