1

ボタンを押した後にボタンを非表示にする非常に単純なスライドアップおよびスライド機能を作成しようとしていますが、JavaScriptのスキルがほとんどなく、確かにばかげたことをしています。

私が機能していないのは、ユーザーがメニューを押しCancelたときにメニューがスライドして戻り、Showボタンが再表示されることです。コードはこちら

<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">Cancel</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>

また、失敗しましたが、次のいくつかのバリエーションを試しました。

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

slideUp関連する多くの問題と解決策を見てきましたが、キャンセル時にShowボタンを表示する簡単な方法がわかりません

4

2 に答える 2

2

これを試して：

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

その使いやすい：

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

ID「表示」ボタンをクリックした場合の機能です

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

最初にID「show」の要素を上にスライドさせ、その後関数を呼び出し、次にID「show」の要素に「hidden」クラスを追加します（表示されているかどうかを確認する場合）

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

クラス「メニュー」で要素を下にスライドし、非表示のクラスを削除しています

「キャンセル」が押された場合の関数についても同じで、IDとクラスのみが異なります:)

于 2011-01-25T22:48:29.507 に答える
1

どこから始めれば。最初。すべての DIV ID を指定して、直接アクセスできるようにします。2番目。$('#cancel') 単語の前に必要なキャンセル ボタンを参照する"#"には、「この ID を持つ要素」を意味します。このクラスの「要素」を意味します"

また、あなたは本当にそうするつもり$("div").slideDown("medium");ですか？つまり、すべての DIV 要素に対してそのアクションを実行します

      <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>
于 2011-01-25T22:36:24.583 に答える