How to stop a button from toggling within div tag using jQuery?

I have a link which triggers div tag to toggle. The problem is that I don't want my button(which is within the div), to toggle. How do I stop it from togglin开发者_如何学Cg?

This is my html code:-

<a href="#" id="uploadVideoLink" class="menuLink"> Upload Videos </a>
<div id="uploadVideos" class="menu">
  <input name="submit" type="submit" value="Upload" id="btn" />
</div>

This is my jQuery code:-

$(document).ready(
  function upload(){$("#uploadVideoLink").click(
     function uploadTog(){$("#uploadVideos").toggle();}     
  );}   
);  

You need to get it outside the <div> you can't hide an element without all the elements inside of him. It's just the way DOM is.

If you mean that you don't want to hide the button that's not possible i think as long as the button is inside the div becuase toggle() assign display: none; to the div thus hiding everything inside it

One thing you could do is this one (this would toggle all elements inside the div but not the button):

<a href="#" id="uploadVideoLink" class="menuLink"> Upload Videos </a>
<div id="uploadVideos" class="menu">
    <div>sometext</div>
    <input name="submit" type="submit" value="Upload" id="btn" />
    <div>sometext</div>
</div>

$(document).ready(

function upload() {
    $("#uploadVideoLink").click(

    function uploadTog() {
        $("#uploadVideos *:not(#btn)").toggle();
    });
});

fiddle http://jsfiddle.net/K5NL4/

If I understand correctly, you will need to move the button outside the div. With a little styling you should be able to get the interface to look right.

Either position the toggled-on DIV on top of the outside button, and place another identical button inside the DIV on top of the original button. Or position the toggled-on DIV adjacent to/just below the button, and just create a border that makes it seem like the button is now 'part' of the toggled DIV.