CODEWITHSUNDEEP
jquery
Rob Jeffrey
Rob Jeffrey

Reputation: 134

Jquery target div inside clicked

I am trying to make a drop down menu using css :hover which works great on desktops and android, but breaks on iPad. Because of this I am swapping :hover for jquery.

The below does just what I need, almost.

var down = false;
$("li").click(function() {
    if (down == false) {
        $(".dropdown").css("height", "150px");
        down = true;
    } else if (down == true) {
        $(".dropdown").css("height", "0px");
        down = false;
    }
});

Basically I have a div container named .dropdown in each li. Can I target the .dropdown when its parent li is clicked?
At the moment all .dropdowns open up.

Upvotes: 1

Views: 593

Answers (2)

Jacob Overgaard
Jacob Overgaard

Reputation: 51

You could replace $(".dropdown") with $(".dropdown", this) to target specific child elements for the li that was clicked, which is represented by this.

Upvotes: 1

Carsten Massmann
Carsten Massmann

Reputation: 28196

Include the current this reference in the selector, like:

$("li").click(function(){
  if (down == false) {
    $(".dropdown",this).css("height", "150px");
    down = true;
  } 
  else if(down == true) {
    $(".dropdown",this).css("height", "0px");
    down = false;
  }
});

The this as a second element in the $(...) makes sure that only child-elements of this will be found.

Upvotes: 2

Related Questions