jQuery Access the LI and link is in

[tomharto]

I have a list and each li in it has a link in, and i want to animate the li the link is in when its clicked. How wouldi do this? Would it be parent i need to look at?

[SB65]

Yes, use .parent().

If your html is something like:

<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
</ul>

then

$('li a').click(function(){
	$(this).parent().animate({'marginLeft':'30px'})
	return false;
});

will animate the parent li.

However, if the li animates when the link is clicked then I'm assuming the link does not go to another URL - in which case you might not need the anchor tags - and then you can just attach a click event to the li itself. Just a thought...

[tomharto]

Well when the link is clicked im gonna use the href to run AJAX query, i just needed to sort the height thing.

That you posted works great thanks . How would i go about toggling it so when you click the link a second time it goes back to the normal height (40px)?

[SB65]

Not sure what you're doing with the height, but using the margin example:

$('li a').click(function(){
	if ($(this).hasClass('active')) $(this).parent().animate({'marginLeft':'0'});//element is already active, so revert to 'normal'
	else $(this).parent().animate({'marginLeft':'30px'});//element is not active so animate it
	$(this).toggleClass('active');//toggle the class
	return false;
});

A few ways of doing this, but this'll work.

[VIPStephan]

Do a conditional check on click and animate appropriately:

$('li a').click(function(e){
  if($(this).parent().height() > 40) {
	$(this).parent().animate({'height':'40px'})
  }
  else {
	$(this).parent().animate({'height':'80px'})
  }
	e.preventDefault();
});

Edit: SB65’s way of using classes is even better since you can style the elements more flexibly.