• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

Simple dropdown click jQuery

Question

ACTIONpack    491

I'm not good at jQuery and would like to be able to click and the menu would drop down. I'm trying to do it but its not working. Here is my sample. Want to do it instead of hover so people can use it on menu.

 

http://cssdeck.com/labs/0pgruqby

Share this post


Link to post
Share on other sites

9 answers to this question

Recommended Posts

  • 0
Brian M.    778

Here is a very simple (oversimplified) example of what you're trying to do:

 

http://jsfiddle.net/yGp4f/

 

The whole thing can be done with no classes and one line of JS if needed. 

Share this post


Link to post
Share on other sites
  • 0
Brian M.    778

Change:

 

$(this).find('ul')
to

 

$(this).parent().find('ul')
The ul isn't in the <a>, it's in the parent li.

Also, you refer to a.dropdown, which doesn't exist - that means: a with the class dropdown.

Share this post


Link to post
Share on other sites
  • 0
the better twin    364

Lots of things wrong here.

Your selector is wrong. Theres no a with a class of dropdown. 

Theres no such function as onclick either. 

Share this post


Link to post
Share on other sites
  • 0
ACTIONpack    491

Yea, Trying to fix it now but no go. I made changes but not working.

Share this post


Link to post
Share on other sites
  • 0
the better twin    364

Yea, Trying to fix it now but no go. I made changes but not working.

Pretty simple and you can use slideToggle to cut down on your repetition too. Just add a class to your first unordered list and then change your jQuery to the following(i would target the list item as opposed to the anchor tag which you dont need):

$('ul.main li').click(function(){
     $(this).find('ul').slideToggle();
});

Share this post


Link to post
Share on other sites
  • 0
ACTIONpack    491

Try that and still no go.

 

 

Pretty simple and you can use slideToggle to cut down on your repetition too. Just add a class to your first unordered list and then change your jQuery to the following(i would target the list item as opposed to the anchor tag which you dont need):

$('ul.main li').click(function(){
     $(this).find('ul').slideToggle();
});

Share this post


Link to post
Share on other sites
  • 0
ACTIONpack    491

Thanks for your help!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.