Jquery slideToggle problem on input form

[chrissim]

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

[Fotiman]

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]

Thanks Fotiman it works like a charm :)

[chrissim]

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]

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]

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]

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]

thumbsup man :)