Welcome to WebmasterWorld Guest from 107.22.14.254

Forum Moderators: open

Message Too Old, No Replies

Jquery slideToggle problem on input form

     
12:52 pm on Feb 20, 2012 (gmt 0)

5+ Year Member



hi,

i have an issues with slideToggle input form when i tried clicked on the text area input form it slideUp back to it original position. Can anyone help me on this issue here?


<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>



<script type="text/javascript">
$(document).ready(function()
{
$('#menuBar li').click(function()
{
$(this).find('.menuInfo').slideToggle("500");
});
});
</script>


Thanks
3:02 pm on Feb 20, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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");
}
});
});
12:03 am on Feb 21, 2012 (gmt 0)

5+ Year Member



Thanks Fotiman it works like a charm :)
12:56 am on Feb 22, 2012 (gmt 0)

5+ Year Member



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");
}
});
});
2:00 am on Feb 22, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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.
8:15 am on Feb 22, 2012 (gmt 0)

5+ Year Member



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");
}
});
});
4:03 pm on Feb 23, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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");
}
});
});
12:25 am on Feb 24, 2012 (gmt 0)

5+ Year Member




thumbsup man :)
 

Featured Threads

Hot Threads This Week

Hot Threads This Month