jQuery展開して閉じる-フロントエンドQ&A-php.cn

jQuery展開して閉じる

PHPz

リリース： 2023-05-09 12:06:37

オリジナル

680 人が閲覧しました

現代のフロントエンド開発において、jQuery は開発者に好まれる JavaScript ライブラリとなっています。シンプルな構文と理解しやすいメソッドを使用して、DOM 操作、イベント処理、アニメーション効果を処理します。この記事では、jQuery を使用して要素を展開したり閉じたりする方法について説明します。

1. 事前知識

jQuery を使用して要素を展開したり閉じたりする前に、フロントエンドの基本的な知識を理解する必要があります。 1 つ目は、CSS プロパティ、特に表示プロパティと可視性プロパティを習得することです。表面的には、どちらも要素を隠していますが、大きく異なります。

要素の表示属性が「none」に設定されている場合、要素は完全に削除され、スペースを占有しません。要素の可視性プロパティが「hidden」に設定されている場合、要素は引き続き存在しますが、スペースを占有し、非表示になっているだけです。

2. 要素に展開関数と終了関数を追加する

jQuery では、slideToggle() メソッドを使用して要素の展開関数と終了関数を完成させることができます。このメソッドは、要素が表示されているかどうかを自動的に検出し、その表示に基づいて要素を展開または閉じます。次に、slideToggle() を使用して div 要素の表示を切り替える方法を示す簡単な例を示します。

<button id="toggle">展开/关闭</button>
<div id="content">这里是内容</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(function() {
    $('#toggle').click(function() {
      $('#content').slideToggle();
    });
  });
</script>

ログイン後にコピー

この例では、ユーザーがボタンをクリックすると、JavaScript コードが slideToggle() メソッドを呼び出します。、可視性に基づいて div 要素を展開または閉じるメソッドです。

3. カスタムスタイル

デフォルトの jQuery アニメーション効果を使用することに加えて、CSS を通じてスタイルをカスタマイズして、展開および閉じるアニメーションをよりパーソナライズすることもできます。以下は、要素が展開されて閉じられるときに要素の背景色を変更する方法を示す例です:

<button id="toggle">展开/关闭</button>
<div id="content">这里是内容</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(function() {
    $('#toggle').click(function() {
      $('#content').slideToggle('slow', function() {
        $(this).toggleClass('open');
      });
    });
  });
</script>

<style>
  #content {
    background-color: #eee;
    display: none;
    padding: 20px;
  }

  .open {
    background-color: #ffa;
  }
</style>

ログイン後にコピー

この例では、要素が展開されたときに要素に追加される CSS クラス open を定義します。優れた。展開ボタンを再度クリックすると、開いているクラスが要素から削除されます。これにより、CSS スタイルを使用して展開した外観と閉じた外観をカスタマイズできるようになります。

4. 一部の要素の表示と非表示

最後に、ある要素を別の要素内で展開したり閉じたりする、より高度な機能を実装しましょう。この場合、jQuery の Brothers() メソッドを使用する必要があります。このメソッドを使用すると、選択した要素と同じレベルにあるすべての要素を検索できるため、要素を展開したり閉じたりすることができます。

これは、リンクがクリックされたときに同じレベルで dl 要素内の dd 要素を表示および非表示にする方法を示す例です:

<a href="#">展开dd元素</a>
<dl>
  <dt>元素1</dt>
  <dd>这是元素1的描述</dd>
  <dt>元素2</dt>
  <dd>这是元素2的描述</dd>
  <dt>元素3</dt>
  <dd>这是元素3的描述</dd>
</dl>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(function() {
    $('a').click(function() {
      var dd = $(this).siblings('dl').find('dd');
      dd.slideToggle('slow', function() {
        if (dd.is(':visible')) {
          $('a').text('隐藏dd元素');
        } else {
          $('a').text('展开dd元素');
        }
      });
      return false; // 必须！
    });
  });
</script>

<style>
  dd {
    display: none;
    padding: 10px;
    background-color: #eee;
    margin: 0;
  }
</style>

ログイン後にコピー

この例では、兄弟() メソッドを使用します。リンクと同じレベルにある dl 要素を検索し、find() メソッドを使用してすべての dd 要素を検索します。リンクがクリックされると、すべての dd 要素が展開または閉じられ、その状態を反映するようにリンクのテキストが変更されます。

5. 概要

jQuery は、動的で対話型の Web アプリケーションを迅速に作成するために使用できる強力な JavaScript ライブラリです。この記事では、jQuery を使用して要素を展開したり閉じたり、それらの要素のアニメーションをカスタマイズしたりする方法を学びました。また、兄弟() メソッドを使用して、同じレベルの要素を検索して操作する方法についても説明しました。これらのテクノロジーは最新の Web アプリケーションを作成するのに非常に役立つため、開発者はこれらのテクノロジーを深く理解し、独自のプロジェクトで使用することをお勧めします。

以上がjQuery展開して閉じるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。