CODEWITHSUNDEEP
javascriptfontsdrop-down-menu
Jérôme Verstrynge
Jérôme Verstrynge

Reputation: 59616

JQuery list drop down menu issue

Yes, it is one of those questions, and I have seen the other similar questions on SO, but could not solve my issue with all available recommendations. I am new to Javascript.

I have created a small list of fonts I can click on to dynamically change the font on my page. Here is the HTML:

<div id='L3_RIGHT'>
    <ul id="ffonts"><li>Font Selection:</li></ul>
</div>

In document-ready, I add <li> entries for each font. When I click on any font name, the page is updated successfully.

I would like to transform that list into a drop down list to take less space on the page. I thought the following would help:

$("#ffonts li").hover(
    function(){$(this).find("ul").slideDown(200);}, 
    function(){$(this).find("ul").slideUp(400);});

but it does not. It does not produce the drop-down effect (and yes it is called in document-ready after <li> entries are created). I tried variations of this and ideas suggested here and there on the net, but no success.

How should I proceed? Thanks.

Upvotes: 0

Views: 85

Answers (2)

evan
evan

Reputation: 12543

Usually a drop down list is a select with option tags. Glad my comment worked for you!

As a note for others that might see this question/answer it is generally better not to reinvent common inputs. There are a lot of tools out there to help people that have accessibility issues. They already know what the built-in inputs are and how to deal with them. They will rarely be able to figure out what you are trying to do when you make it all custom and snazzy.

Upvotes: 1

MichaelSmith
MichaelSmith

Reputation: 719

Your hover function uses the 'li' element as 'this' and 'find' only finds elements deeper in the dom. Since 'ul' is higher in the dom, you can do a $(this).parents('ul') (or '.parent()' if you know 'li' is the direct descendant in all cases) and then your slide function should be working on the correct element.

I expanded on your example a little bit here: http://jsfiddle.net/fEdpA/1/

You probably don't want 'Font Selection:' inside of your 'li' element because it will disappear when the ul slides up, that's where your fonts go. In my example I just create a label for you and get the parent, then you can look inside with 'find' and get the 'ul'.

Upvotes: 1

Related Questions