jQueryでtoggleメソッドを実装する方法

今回はjQueryでtoggleメソッドを実装する方法を紹介します。 jQueryでtoggleメソッドを使用する際の注意点は何ですか？以下は実際のケースです。 上下に移動するには jQuery が使用されることがわかっており、slideUp() メソッドと slideDown() メソッドを直接使用できます。

slideUp() メソッドと slideDown() メソッドは要素の高さのみを変更します。要素の

display

属性値が「none」の場合、slideDown()メソッドを呼び出すと、要素は上から下に向かって表示されます。 slideUp() メソッドはその逆で、要素は上から下に短縮されて非表示になります。

コードは次のとおりです:

nbsp;html>


 <meta>
 <title>toggle-jquery1.9</title>
 <script></script>
 <style>
  p.container {
   height: 320px;
   border: 1px solid #ccc;
  }
  p.left {
   width: 200px;
   height: 300px;
   background-color: #36f;
  }
 </style>


 <p>
  </p><p></p>
 

 toggle  <script> $(document).ready(function(){ $(&#39;#toggle&#39;).click(function(){ $(&#39;.left&#39;).slideToggle(300); }); }); </script> それでは、左右にスライドインおよびスライドアウトする場合はどうでしょうか?

デモは次のとおりです:

nbsp;html>


 <meta>
 <title>toggle-jquery1.9</title>
 <script></script>
 <style>
  p.container {
   height: 320px;
   border: 1px solid #ccc;
  }
  p.left {
   width: 200px;
   height: 300px;
   background-color: #36f;
  }
 </style>


 <p>
  </p><p></p>
 

 toggle  <script> $(document).ready(function(){ $(&#39;#toggle&#39;).click(function(){ $(&#39;.left&#39;).animate({width:&#39;toggle&#39;},350); }); }); </script> この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

jqueryでselectコンポーネントを使用する方法

jqueryのログイン効果を実装する方法

jQueryカスタム関数アプリケーションとマウス移動事故事例詳しい説明も

以上がjQueryでtoggleメソッドを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。