jQuery-toggleはクリックするたびにイベントが発生し、$クリック表示が繰り返され、再びクリックして非表示になります.

1765 ワード

機能一:
toggle()メソッドは、選択された要素の交代clickイベントに応答するために、2つ以上のイベントプロセッサ関数をバインドするために使用される.
異なる背景色を切り替えます.
$("p").toggle(
  function(){
  $("body").css("background-color","green");},
  function(){
  $("body").css("background-color","red");},
  function(){
  $("body").css("background-color","yellow");}
);

機能2:

Hide()とShow()の切り替え


各要素が表示されているかどうかを確認します.
要素が非表示の場合はshow()を実行します.要素が表示されている場合、要素hide()です.これにより、切り替え効果を作成できます.
構文:
$(selector).toggle(speed,callback)

パラメータ
説明
speed
オプション.hide/show効果の速度を指定します.既定は0です.可能な値:
  • ミリ秒(例えば1500)
  • "slow"
  • "normal"
  • "fast"

  • callback
    オプション.toggle()メソッドが完了したときに実行される関数.
    機能3:

    要素の表示または非表示


    一致するすべての要素のみを表示または非表示にするかどうかを指定します.

    構文

    $(selector).toggle(switch)

    パラメータ
    説明
    switch
    必要です.ブール値は、toggle()がすべての選択された要素のみを表示または非表示にするかどうかを指定します.
  • true-表示要素
  • false-非表示要素
  • 例:
    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $(".btn1").click(function(){
        $("p").toggle(true);
      });
    });
    </script>
    </head>
    <body>
    <p>This is a paragraph.</p>
    <p style="display:none">This is another paragraph.</p>
    <p>  switch       false,        。</p>
    <button class="btn1">     p   </button>
    </body>
    </html>