...

View Full Version : how to hide a UL when i click out?



dylanbaumannn
03-23-2012, 04:10 PM
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:


<ul id="selectService">
<li></li>
<li></li>
<li></li>
</ul>
<ul id="secondHalf">
<li></li>
<li></li>
<li></li>
</ul>




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 :confused: any thoughts?

devnull69
03-23-2012, 05:56 PM
Did you mix "selectService" with "serviceSelect"?

dylanbaumannn
03-23-2012, 09:54 PM
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)



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

devnull69
03-24-2012, 09:00 AM
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


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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum