CODEWITHSUNDEEP
jqueryslidetoggle
Len Damico
Len Damico

Reputation: 47

slideToggle: Hiding a parent by clicking a child link

I've got a <nav> that I want to reveal by clicking a handle link to open and close. I'd also like to close the <nav> when I click one of the child links. Using slideToggle on both the handle link and children isn't working. The handle link works just fine, but the <nav> collapses and opens back up when you click on a child link.

jsFiddle of what's going on: http://jsfiddle.net/qHZe8/

Thanks in advance!

Upvotes: 3

Views: 362

Answers (4)

Halil &#214;zg&#252;r
Halil &#214;zg&#252;r

Reputation: 15945

You have given the same CSS class (.pull) to both the <ul> and the handle. Hence a click on the items registers as a click for the .pull handler too. The correct one: http://jsfiddle.net/X2A3C/

Upvotes: 0

Federico Giust
Federico Giust

Reputation: 1793

The problem is that you are using the same class in the ul and in the link to open it, so whenever you click in the child links it executes both actions.

If you remove the class from the ul tag it should work

http://jsfiddle.net/slfede/qHZe8/2/

Upvotes: 1

Anthony Grist
Anthony Grist

Reputation: 38345

Your <ul> element also has the class pull, so clicking on one of the links inside it is also firing off a click event handler to toggle the element again.

You'll need to stop the event propagating from the links inside the <ul> so that this doesn't happen.

jQuery("ul.pull li a").click(function(e) {
    e.stopPropagation();
    $("nav.mobile-navigation").slideUp("fast");
});

Upvotes: 3

VisioN
VisioN

Reputation: 145388

The problem is that you have two elements with class pull.

One possible solution is to use different selector:

jQuery("a.pull").click(function() {
    $("nav.mobile-navigation").slideToggle("fast");
});

DEMO: http://jsfiddle.net/qHZe8/1/

Upvotes: 1

Related Questions