$(this).find(..) alternative

Question

I find my self doing this but not sure if this is the best way. Here an example.

<ul id="menubar">
 <li><a class="menu_item">File</a>
 <ul>
 <li><a id="menu_file_new">New</a></li>
 <li><a id="menu_file_open">Open</a></li>
 </ul>
 </li>
 <li><a class="menu_item">Run</a>
 <ul>
 <li><a id="menu_run_preview">Preview</a></li>
 <li><a id="menu_run_compile">Compile</a></li>
 </ul>
 </li>
</ul>

JQuery

$('.menu_item').hover(function(){
 $(this).find('ul').show();
});

Just wondering is this the best way, find seems a bit overkill?

---

EDIT: I can't use css because of this: Fails in Opera/IE when an item is clicked/hover it fails in those two browsers. http://jsfiddle.net/cJsn2/1/ this is because of html standard.

• Casey Foster: I believe you can also use $('ul', this).show()
• epascarello: I would think you would really want: $(this).find('>ul').show(); in case you want to do multiple levels in the future. Also remember that not everyone uses a mouse. Pick a menu library from the net that does all of the hard work for you.
• epascarello: @CaseyFoster, it would work, but it is slower.
• Jeff Noel: $('#menubar, #menubar ul).attr('display','block');

Answer 1

You can do this with CSS only

.menu_item ul { display: none; }
.menu_item:hover ul {display: block; }

as for the JavaScript, it's fine, you can use $.children instead of $.find to traverse less nodes

• Kivylius: That fine but I ran into a problem with css and Opera/IE with menubars that unfixable because of lack of support.
• Naftali: @CezarisLT im sure there are many shims or shivs to update support.
• Yoshi: From the given html, there is no ul in an a-tag. (nor should it)
• Kivylius: I can't use css because of this: Fails in Opera/IE when an item is clicked/hover it fails in those two browsers. jsfiddle.net/cJsn2/1 this is because of html standard.

Answer 2

This would be a simple hover script:

// I'm purposely using `toggleClass`, instead of show/hide, to
// have more flexibility with styling
$('.menu_item').each(function () {
 var $li = $(this).closest('li');
 $(this).hover(function () {
 $li.toggleClass('hover');
 });
});

with the following css:

ul ul {
 display: none;
}
li.hover > ul {
 display: block;
}

demo: http://jsbin.com/ehifod/1/

• Kivylius: this is fine but I was planning to use .hover(func(),func()) one for mouseover and one for mouseout ? Is this bad? Hover seems to support that? Maybe your method above is better but a bit too complex.
• Yoshi: @CezarisLT I don't think it makes much of a difference, either hover with two functions (one to add, one to remove a class), or only one function (using toggleClass) is essentially the same. I think the added complexity of my example comes from the fact, that I like to cache my selectors. E.g. only executing $(this).closest('li'); once for each .menu_item instead of constantly evaluting it inside the hover-callback.
• Kivylius: and this i'm amusing yields performance? Can you quickly explain how?
• Yoshi: Well, jQuery will only look for the closest li once per .menu_item. Without caching it, it would look every time a mouseover/mouseout happens.
• Yoshi: Here is a helpful article about the topic.

Answer 3

Try doing this with just css

the catch is that you're going to apply the "hover" on the li and not in the a

#menubar li ul{ 
 display:none; 
}
#menubar li:hover > ul{ 
 display:block; 
}

jsfiddle>

• Kivylius: I can't use css because of this: Fails in Opera/IE when an item is clicked/hover it fails in those two browsers. jsfiddle.net/cJsn2/1 this is because of html standard.

Answer 4

What you want to use is closest. It travels up the DOM-tree to find the first parent element matching the selector: (削除)

$('.menu_item').hover(function(){
 $(this).closest('ul').show();
});

(削除ここまで)

$(".menu_item").hover(function() {
 $(this).next().show();
});

Answer 5

You can use CSS (this is under the assumption that the ul element is contained within the .menu_item element):

.menu_item:hover > ul {
 display: block;
}

Demo: http://jsfiddle.net/maniator/cJsn2/

Using the following HTML:

<ul id="menubar">
 <li class="menu_item"><a>File</a>
 <ul>
 <li><a id="menu_file_new">New</a></li>
 <li><a id="menu_file_open">Open</a></li>
 </ul>
 </li>
 <li class="menu_item"><a>Run</a>
 <ul>
 <li><a id="menu_run_preview">Preview</a></li>
 <li><a id="menu_run_compile">Compile</a></li>
 </ul>
 </li>
</ul>