problem with the drop down menu with jquery

Question

Basically I have some links which include some other links, I'm trying to show the parent links only and when one clicks on the parent link the child links should appear and when one clicks on the parent link again the child link should disappear,

the code works for the first click and it opens the relevant child links but how do I make them disappear when I click on the parent link again,

thanks for the help.

jQuery.noConflict();

jQuery(document).ready(function(e) {

jQuery('.nav-container ul.level0 li.level1 a').click(function(e) {

    e.preventDefault();
    jQuery(this).css({'background':'#000000','color':'#ffffff'});
    jQuery('.nav-container ul.level0 li.level2 a').css('display','block');

});

});

Keltex · Accepted Answer · 2011-02-02 15:23:24Z

1

Use jquery toggle function.

answered Feb 2, 2011 at 15:23

Keltex

26.5k12 gold badges82 silver badges112 bronze badges

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

Comments

Jo Albright · Accepted Answer · 2011-02-02 15:29:09Z

0

A simple way to do this would be creating an attribute to be read on the item you have clicked.

jQuery.noConflict();

jQuery(document).ready(function(e) {

    jQuery('.nav-container ul.level0 li.level1 a').click(function(e) {
        if(jQuery(this).attr('sel') != 'true')
        {
            e.preventDefault();
            jQuery(this).attr('sel','true');
            jQuery(this).css({'background':'#000000','color':'#ffffff'});
            jQuery('.nav-container ul.level0 li.level2 a').css('display','block');
        } else {
            jQuery(this).attr('sel','');
            // do close code
        }
    });

});

Where the attribute 'sel' could be something else like 'pushed', or 'dropped'... just might want to watch from using things like 'selected', 'click', or others that could confuse HTML. Also I would not use 'class' since you could have multiple classes on an object and it would return this.

<div class="selected item"></div>
jQuery(this).attr('class') = 'selected item';

answered Feb 2, 2011 at 15:29

Jo Albright

5701 gold badge5 silver badges15 bronze badges

2 Comments

Keltex Over a year ago

A performance comment. It's much faster to alias jQuery(this) or $(this) in a variable. So do a var $el = $(this) at the top of your click function and then refer to this variable.

Jo Albright Over a year ago

@Keltex - Thank you for this comment, but it is actually the OP's code that I rewrote with my additions to it. I didn't change the original code as to not confuse the OP.

Collectives™ on Stack Overflow

problem with the drop down menu with jquery

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related