ホームページ > 記事 > ウェブフロントエンド > jQueryを使ってDiv関数を開いたり閉じたりする方法
現代の Web 開発では、インタラクティブな効果が Web サイトの重要な部分になっています。中でもDivの動的な開閉は頻繁に使用される機能であり、ユーザーエクスペリエンスを向上させ、Webサイトの利用価値を向上させることができます。
今回はjQueryを使ってDivをオープン・クローズする機能を実現する方法を紹介します。始めましょう!
1. HTML コード構造
まず、この関数を実装するための HTML コード構造を記述する必要があります。コードは次のとおりです。
<div class="container"> <div class="trigger"></div> <div class="panel"> <p>这里是面板内容</p> </div> </div>
ここでは、タイトル要素「trigger」とパネル要素「panel」を含むコンテナ要素「container」を使用します。
2. CSS スタイル
CSS を使用して、コンテナ、タイトル、パネルのスタイルを定義できます。コードは次のとおりです。
.container { position: relative; width: 500px; margin: 0 auto; } .trigger { position: relative; height: 50px; background-color: #EEE; } .panel { position: absolute; top: 0; left: 0; width: 100%; height: 0; overflow: hidden; transition: height 0.3s ease; background-color: #FFF; }
この CSS コードでは、コンテナが相対的に配置され、中央に配置されるように設定します。ヘッダーは背景色を持つブロックレベルの要素として定義されますが、パネルは絶対位置に設定され、高さは 0 です。これは、パネルがページ上に表示されないことを意味します。同時にパネルの開閉時に0.3秒で高さが徐々に変化するトランジションエフェクトを追加しました。最後に、パネルの背景色を白に設定します。
3. JS コード
$(document).ready(function() { $('.trigger').click(function() { var panel = $(this).next('.panel'); if (panel.height() == 0) { panel.css('height', panel.prop('scrollHeight') + 'px'); } else { panel.css('height', '0'); } }); });このコードでは、コードがより簡潔に見えるように、「jQuery」キーワードの代わりに jQuery の「$」記号を使用しています。 最初にこの関数を $(document).ready() 関数でラップします。これは jQuery 関数であり、ページの DOM が読み込まれるときに対応する関数が実行されることを示します。 次に、「.click()」メソッドを使用して、イベント ハンドラーをタイトル要素にバインドします。タイトル要素をクリックすると、イベント ハンドラーが起動されます。 jQuery の「.next()」メソッドを使用して、次の要素 (この場合はパネル要素) を取得します。次に、パネル要素の高さを確認し、それが 0 の場合は、パネル要素の高さをスクロールの高さに設定し、それ以外の場合は、高さを 0 に設定して閉じます。
4. 結論
以上がjQueryを使ってDiv関数を開いたり閉じたりする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。