Question

I need a menu that looks like a select box, but is made from a UL generated by WordPress. Rather than converting it to an actual select box, which creates style issues, I want to use jQuery show/hide.

I couldn’t find any jQuery plugin made for this – to make a little select menu from a UL. The look I want eventually is like this: http://shaggysmile.github.com/jQueryCoreUISelect/. But this plugin uses an actual select box, and I’m in WordPress using a UL.

Here’s the Fiddle: http://jsfiddle.net/uthNv/1/

I need to replace this line of code with something better:

if($(this).next('li').is(':hidden') == true) {

The problem with using the next LI is that the last menu item doesn’t work. Any suggestions please, or knowledge of a jQuery plugin that already does what I need?

Answer 1

You can try with this: http://jsfiddle.net/uthNv/2/

if($(this).siblings('li:hidden').length) {

Issue in your condition was it was checking only the next li which is hidden not the prev li so instead if you use .siblings() which is at same level that would work.

in this condition you can check the .length of the hidden li if that is true then your else statement will get executed.