jQuery slideDown slideUP - hide button_问答_开发者

I am trying to write a very simple slide up and slide function that hides the buttons after they are pressed, but I have little javascript skill and am surely doing something silly.

What I is not working, is when the user presses Cancel the menu should slide back up and the Show button should reappear. Heres the code

<html>
<head>
  <style>
div {margin:3px; width:130px; height:30px; display:none;}
</style>
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
  <button id="show" onclick="this.style.visibility = 'hidden';">Show</button>
<div><input type="text" size="20"/></div>
<div><input type="text" size="20"/></div>
<div><button id="submit">Submit</button> <button id="cancel">C开发者_高级运维ancel</button></div> 

<script>
// Sliding Menu Down
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").slideDown("slow");
} else {
$("div").hide();
}
}); 

// Sliding Menu UP [Not Working]
$(document.body).click(function () {
if ($("#cancel").is(":hidden")) {
$("div").slideUp("slow");
} else {
$("#cancel").show();
}
});


</script>
</body>
</html>

Have also, unsuccessfully, tried some variations of:

 $("cancel").click(function () {
 $(this).parent().slideUp("slow", function () {
 $("#msg").text($("cancel", this).text() + " has completed.");
   });
});

I have seen many related issues and resolutions but I cannot figure out the simple slideUp and making the Show button visible on cancel

Try this:

<html>
<head>
<style>
div.menu {margin:3px; width:130px; height:30px; display:none; }
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>

<script>
$(document).ready(function(){
    $('#show').click(function(){
        $('#show').slideUp('slow', function(){
            $('.menu').slideDown('slow').removeClass('hidden');
        }).addClass('hidden');
    });

    $('#cancel').click(function(){
        $('.menu').slideUp('slow', function(){
            $('#show').slideDown('slow').removeClass('hidden');
        }).addClass('hidden');
    });
})(jQuery);
</script>
</head>
<body>

<button id="show">Show</button>
<div class="menu hidden"><input type="text" size="20"/></div>
<div class="menu hidden"><input type="text" size="20"/></div>
<div class="menu hidden">
    <button id="submit">Submit</button>
    <button id="cancel">Cancel</button>
</div> 

</body>
</html>

Its easy to use:

$('#show').click(function(){...});

is the function if the button Element the ID "show" is clicked

$('#show').slideUp('slow', function(){...}).addClass('hidden');

is first sliding up the Element with the ID "show" and is calling the function afterwards, and then it is adding an "hidden" class to the Element with the ID "show" (if you want to check if its visible or not)

$('.menu').slideDown('slow', function(){ $(this).removeClass('hidden'); });

is sliding Down the Elements with the Class "menu" and is removing the class hidden

The same is for the Function if "cancel" is pressed, only the IDs and Classes are different :)

where to start. first. give all your DIVs ID's so you can access them directly. second. to reference the cancel button you want $('#cancel') a "#" before a word means "The ELEMENT with this ID" a "." means "The ELEMENT(s)" with this class"

also are you sure you mean to do $("div").slideDown("medium"); and the similar? that means do that action to ALL DIV elements

      <button id="show" style="display:block;">Show</button>
<div class='inputs' style='display:none;'>
    <div><input type="text" size="20"/></div>
    <div><input type="text" size="20"/></div>
    <div><button id="submit" class='formDone'>Submit</button> <button id="cancel"  class='formDone'>Cancel</button></div> 
</div>

<script>
$(document).ready(function(){
  $('#show').live('click',function(){//show the form on request
    $(this).hide();
    $('.inputs').show();
  });
  $('.formDone').live('click',function(){//hide the form on submit of cancel
    //use a AJAX method to submit your form maybe here???
    $('#show').show();
    $('.inputs').hide();
  });

});

</script>