jQueryでtoggleメソッドを実装する方法-H5 チュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-03-14 15:51:10

オリジナル

2210 人が閲覧しました

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

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

display

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

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>toggle-jquery1.9</title>
 <script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
 <style>
  p.container {
   height: 320px;
   border: 1px solid #ccc;
  }
  p.left {
   width: 200px;
   height: 300px;
   background-color: #36f;
  }
 </style>
</head>
<body>
 <p class="container">
  <p class="left"></p>
 </p>
 <button id="toggle">toggle</button>
 <script>
  $(document).ready(function(){
   $('#toggle').click(function(){
    $('.left').slideToggle(300);
   });
  });
 </script>
</body>
</html>

ログイン後にコピー

それでは、左右にスライドインおよびスライドアウトする場合はどうでしょうか?

デモは次のとおりです:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>toggle-jquery1.9</title>
 <script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
 <style>
  p.container {
   height: 320px;
   border: 1px solid #ccc;
  }
  p.left {
   width: 200px;
   height: 300px;
   background-color: #36f;
  }
 </style>
</head>
<body>
 <p class="container">
  <p class="left"></p>
 </p>
 <button id="toggle">toggle</button>
 <script>
  $(document).ready(function(){
   $('#toggle').click(function(){
    $('.left').animate({width:'toggle'},350);
   });
  });
 </script>
</body>
</html>

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

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

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

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

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