1

ボタンがクリックされたときに表示したい「info」というdivがあります。

<button>Toggle</button>
<div id="toggle">
Test
</div>

基本的には、jQuery を使用してスライド機能で表示したいのですが、方法がわかりません。私はほとんどのコードをオンラインで見つけてスニペットを見ることができますが、実際にはそのほとんどをどこに置くべきかわかりません.これを機能させますか？ありがとうございました。

4

3 に答える 3

6

CSS

#toggle {
  display: none
}

jQuery

$(document).ready(function() {
   $('button').on('click', function() {
     $('#toggle').slideToggle();
   });
});

少し説明：

  • $('button')buttonタグへのセレクタです。

  • $('button').on('click',クリックイベントを にバインドするためのものbuttonです。

  • ここの 2 番目のパラメータon()はコールバック ハンドラで、その中のコードは をクリックした後に実行されますbutton。

  • $('#toggle')divwithへのセレクターid=toggleです。

  • $('#toggle').slideToggle()divボタンのクリック時にスライド (上下) 効果を作成します。

ノート

jQuery dom ready 関数内でコードを実行する必要があります。次のようなものです：

$(document).ready(function() {
  // your code
})

要するに

$(function() {
  // your code
});

これらは JavaScript コードであるため、<script>タグ内に配置する必要があります。例えば：

<script type="text/javascript">
    $(document).ready(function() {
       $('button').on('click', function() {
         $('#toggle').slideToggle();
       });
    });
</script>

ただし、このコードを外部ファイルに書き込む場合は、そのファイルを<head>次のようにタグ内に含める必要があります。

<script type="text/javascript" src="src_to_script"></script>

コメントによると

最初にクリックしたときにボタンを非表示にすることはできますか?

はい、可能です。以下のようにしてみてください：

$(document).ready(function() {
   $('button').on('click', function() {
     $(this).hide(); // disappear the button after first click
     $('#toggle').slideToggle();
   });
});
于 2012-08-14T12:07:43.727 に答える
1

ここにリンクの説明を入力してくださいこれを試すことができます：

$(document).ready(function(){
    $('div#toggle').hide();
    $('button').on('click', function(){
       $('#toggle').slideToggle();                    
    });
});
于 2012-08-14T12:21:28.940 に答える
1

この方法でもそれを行うことができます：

ここに調べる jsFiddle があります

$(document).ready(function() {
  $('button').bind('click', function() {
     if ($('#toggle').is(':visible')) {
       $('#toggle').hide();
     }else{
       $('#toggle').show();
     }
  });
});
于 2012-08-14T12:10:02.897 に答える