Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jul 2010
    Location
    Sheffield
    Posts
    824
    Thanks
    93
    Thanked 18 Times in 18 Posts

    Access the LI and link is in

    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?

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Yes, use .parent().

    If your html is something like:

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

    Code:
    $('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...

  • #3
    Regular Coder
    Join Date
    Jul 2010
    Location
    Sheffield
    Posts
    824
    Thanks
    93
    Thanked 18 Times in 18 Posts
    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)?

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Not sure what you're doing with the height, but using the margin example:

    Code:
    $('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.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Do a conditional check on click and animate appropriately:
    Code:
    $('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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •