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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts

    Unhappy how to hide a UL when i click out?

    hello!

    I currently have 2 UL's that get slide down when you click a button (used for navigation). I currently have it set up so that when you click the "ul#selectService" they slide down, and when you click it a second time it will slide back up and disappear. However, they only way to get the UL's to disappear is to click the "ul#selectService" a second time, so I'm trying to get it set up so that when you click on anything that isn't the UL's it will cause it to slide back up again.

    i currently have been working on a starting idea to show what I'm basically trying to do so that you can get a rough estimate of my goal:

    This is my HTML that i'm using:
    Code:
    <ul id="selectService">
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul id="secondHalf">
        <li></li>
        <li></li>
        <li></li>
    </ul>
    Code:
    var $box = $('#selectService');
    $("*:not(#serviceSelect)").click(function(){
    	if (!$box.has(this).length) { // if the click was not within $box
    		$('#selectService').hide();
    		$('#secondHalf).hide();
    	}
    });
    Right now nothing is happening when i click out of the UL any thoughts?

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Did you mix "selectService" with "serviceSelect"?

  • #3
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    haha no, sorry about that, that's just an error that I goofed up on when typing it into CodingForums the copy+paste version is below (oops)

    Code:
    var $box = $('#serviceSelect');
    $("*:not(#serviceSelect)").click(function(){
    	if (!$box.has(this).length) { // if the click was not within $box
    		$('#serviceSelect').animate({height:0},function(){ $this.removeClass('open'); });
    	}
    });
    I had it correct on my local html, currently when I click it - it will slide down, then immediately slide back up

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Ok, I think I know what you want to do ... but I only see an animation to "height:0" ... so slideUp essentially, where is the slideDown?

    Try this
    Code:
      var $box = $('#serviceSelect');
      $('button').click(function(e) {
         $box.slideDown('slow');
         e.stopPropagation();
      });
      
      $(document).click(function(e) {
         if($(e.target).parent()[0] != $box[0]) $box.slideUp('slow');
      });
    You need to use stopPropagation inside the button .click(), because the button is also not the <ul> (otherwise it would immediately close the list after opening it). Second: Clicking the <ul> essentially means clicking one of the <li>. So you need to check the parent() of the clicked element against the <ul> to prevent slideUp

    Example: http://jsbin.com/apikaw


  •  

    Tags for this Thread

    Posting Permissions

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