36

要素を取得したdivので、それをクリックすると、divデフォルトで非表示になっている別の要素がスライドして表示されます。アニメーション自体のコードは次のとおりです。

$('#myelement').click(function(){
     $('#another-element').show("slide", { direction: "right" }, 1000);
});

どうすればそれを行うことができますか？#myelementもう一度クリックすると（要素がすでに表示されている場合） 、次のように非表示#another-elementになります：

$('#another-element').hide("slide", { direction: "right" }, 1000);？

つまり、基本的には、関数とまったく同じようslideToggleにshow/hide機能するはずです。それは可能ですか？

4

7 に答える 7

58

トグルイベントはバージョン1.8で非推奨になり、バージョン1.9で削除されました

これを試して...

$('#myelement').toggle(
   function () {
      $('#another-element').show("slide", {
          direction: "right"
      }, 1000);
   },
   function () {
      $('#another-element').hide("slide", {
          direction: "right"
      }, 1000);
});

注：このメソッドシグネチャはjQuery 1.8で非推奨になり、jQuery1.9で削除されました。jQueryは、要素の表示を切り替える.toggle（）という名前のアニメーションメソッドも提供します。アニメーションまたはイベントメソッドが起動されるかどうかは、渡された引数のセット、 jQuerydocsに依存します。

.toggle（）メソッドは便宜上提供されています。同じ動作を手動で実装するのは比較的簡単です。これは、.toggle（）に組み込まれている前提条件が制限されていることが判明した場合に必要になる可能性があります。たとえば、.toggle（）は、同じ要素に2回適用された場合、正しく機能することが保証されていません。.toggle（）は内部でクリックハンドラーを使用して作業を行うため、クリックのバインドを解除して.toggle（）に付随する動作を削除し、他のクリックハンドラーがクロスファイアに巻き込まれる可能性があるためです。実装はイベントで.preventDefault（）も呼び出すため、要素jQuery docsで.toggle（）が呼び出された場合、リンクはたどられず、ボタンはクリックされません。

表示を使用して表示を切り替え、クリックで非表示を切り替えます。要素が表示されている場合は可視性に条件を設定し、それ以外の場合は非表示にして表示することができます。方向のように表示/非表示で追加効果を使用するには、 jQueryUIが必要になることに注意してください。

ライブデモ

$( "#myelement" ).click(function() {     
    if($('#another-element:visible').length)
        $('#another-element').hide("slide", { direction: "right" }, 1000);
    else
        $('#another-element').show("slide", { direction: "right" }, 1000);        
});

または、クリックする代わりにトグルを使用します。トグルを使用することにより、条件（if-else）ステートメントは必要ありません。TJCrowderによって提案されたように。

ライブデモ

$( "#myelement" ).click(function() {     
   $('#another-element').toggle("slide", { direction: "right" }, 1000);
});
于 2012-04-25T06:54:17.317 に答える
29

あなたのためにタスクを実行するjqueryトグル関数を利用してください

.toggle（） -一致した要素を表示または非表示にします。

$('#myelement').click(function(){
      $('#another-element').toggle('slow');
  });
于 2012-04-25T06:55:15.727 に答える
3

これはあなたのために働くでしょう

   $("#button-name").click(function(){
        $('#toggle-id').slideToggle('slow');
    });
于 2014-12-04T08:04:42.573 に答える
0

....toggle()の代わりに関数を使用できます。.click()

于 2012-04-25T06:56:46.867 に答える
0

このコードを使用して、要素を切り替えることができます var ele = jQuery（ "yourelementid"）; ele.slideToggle（'slow'）; これはあなたのために働くでしょう:)

于 2012-04-25T07:01:17.380 に答える
0 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js</script>        <script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>
<p>Welcome !!!</p>
<button>Toggle between hide() and show()</button>
</body>
</html>
于 2021-01-26T11:14:36.357 に答える
-3 
$(document).ready( function(){
  $("button").click(function(){
    $("p").toggle(1000,'linear');
  });
});

ライブデモ

于 2015-02-18T10:59:14.313 に答える