Fotiman
msg:4419559 | 3:02 pm on Feb 20, 2012 (gmt 0) |
It's behaving as expected. "Toggle" means to switch back and forth between 2 states (displayed or hidden). Events "bubble up", so when the user clicks on the input field, the click event fires there first, then bubbles up the ancestor chain. So when the click event reaches '#menuBar li', it performs the toggle again, thus sliding it back up to it's original position.
If you only want to toggle when the "File Forms" text is clicked, then you could modify your function like this:
$(document).ready(function() {
$('#menuBar li').click(function(event) {
// If the event target of the click is this
// LI element and not one of it's children,
// then toggle the '.menuInfo' child
if (event.target === this) {
$(this).find('.menuInfo').slideToggle("500");
}
});
});
|
|
|
chrissim
msg:4419765 | 12:03 am on Feb 21, 2012 (gmt 0) |
Thanks Fotiman it works like a charm :)
|
chrissim
msg:4420258 | 12:56 am on Feb 22, 2012 (gmt 0) |
hi Fotiman
What about if i need 'clickoutside' event that close the menu if it's open
$(document).ready(function() {
$('#menuBar li').click(function(event) {
// If the event target of the click is this
// LI element and not one of it's children,
// then toggle the '.menuInfo' child
if (event.target === this) {
$(this).find('.menuInfo').slideToggle("500");
}
});
});
|
|
|
Fotiman
msg:4420300 | 2:00 am on Feb 22, 2012 (gmt 0) |
You'd probably want to attach a click handler to the document that gets every '#menuBar li', and for each one if it doesn't contain the event.target and the .menuInfo is visible, then call slideUp on it.
|
chrissim
msg:4420374 | 8:15 am on Feb 22, 2012 (gmt 0) |
hi Fotiman,
Can you show me how to do it right based on the following script below: Sorry im not good in jquery and a completely idiot on this subject. Hope you can provide me solution here :)
Thanks
<div id="menuBarHolder">
<ul id="menuBar">
<li>File Forms<div class="menuInfo">
Submit Form :
<input type="text" name="delfile" id="text" value="" onfocus="if(this.value==this.defaultValue) this.value='';">
<input type="submit" name="delpage" id="submit" value="Submit" class="button black medium" />
</div></li>
|
|
$(document).ready(function() {
$('#menuBar li').click(function(event) {
// If the event target of the click is this
// LI element and not one of it's children,
// then toggle the '.menuInfo' child
if (event.target === this) {
$(this).find('.menuInfo').slideToggle("500");
}
});
});
|
|
|
Fotiman
msg:4420938 | 4:03 pm on Feb 23, 2012 (gmt 0) |
Sorry, haven't had a chance to look into this further. I suspect something like this:
$(document).click(function(event) {
$('#menuBar li').each(function (index, el) {
if (!$(el).has(event.target).length && el != event.target) {
$(el).find('.menuInfo:visible').slideUp("500");
}
});
});
|
|
|
chrissim
msg:4421155 | 12:25 am on Feb 24, 2012 (gmt 0) |
thumbsup man :)
|
|
