Jquery dropdown menu using toggle and hover() problem

Question

So I am trying to create a drop down menu using .hover() and .toggle(). While Have managed to get the menu to appear when the user rolls over the link, it disappears when the user moves off the link to select an item from the menu. Is there a method or technique for keeping the menu toggled even when the user isn't still hovering over the link?

Here is the JS:

<script type="text/javascript">
$(document).ready(function() {
$("#menu_link").hover(function () {
$("#the_menu").toggle();
});
});
</script>

SLaks · Accepted Answer · 2010-11-22 04:35:45Z

3

Put the menu element inside the link.

answered Nov 22, 2010 at 4:35

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Thomas Over a year ago

I thought about that but it seemed like that might interfere with the anchor tags inside the menu element. No?

SLaks Over a year ago

@Thomas: This is usually done by making each menu item an <li>, and making the submenus <ul> elements inside the <li>. You can also put an <a> inside the <li>.

David Tang · Accepted Answer · 2010-11-22 04:51:19Z

1

The solution can vary greatly depending on the HTML markup you're using. But a general solution to these kinds of things is to let the body element detect "mouseenters" and detect which element the event originated from. If it's not either #menu_link or #the_menu, then hide the menu.

$("body").mouseenter(function (e) {
   var eventParents = $(e.target()).parents();
   if (eventParents.index($("#menu_link")) == -1 &&
         eventParents.index($("#the_menu")) == -1) {
      $("#the_menu").hide();
   }
});

$("#menu_link").mouseenter(function () {
   $("#the_menu").show();
});

This gives you flexibility in, for example, placing the menu link in a different container div to the menu itself.

answered Nov 22, 2010 at 4:51

David Tang

93.8k32 gold badges169 silver badges149 bronze badges

Collectives™ on Stack Overflow

Jquery dropdown menu using toggle and hover() problem

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related