おそらく、多くの人が素晴らしいスライダーピックアップを見ました（テキストまたは他の何かがクリックします）。 私はこれがどのように行われるかを伝えようとし、申請の場所を提案します。
行こう:)
必要なもの：
1. jQueryライブラリー自体
2.少し時間
3.欲望:)
行こう わかりやすくするため、例： デモ 。
スライダーの動作には3つのオプションがあります。
1.すべてのアイテムが閉じられます。 次に、選択したもののみを開く必要があります。
2. 1つのアイテムが開いていて、閉じる必要があります。
3.開いている要素がありますが、閉じた要素の1つを選択します。新しい要素が開き、その前に開く必要があります-カールします。
準備作業：
1. jQueryライブラリーを接続します。
2.使用する要素のクラスを定義します。 この例では、コンテナid =“ faq”（原則として、コンテナ識別子なしで実行できます）があり、その下で展開するテキストをクリックする要素は<p class =“ question”> </ p>になります。 、実際に表示されるテキストのコンテナ<p class = "answer"> </ p>。
3.当然、エキスパンドコンテナは最初は非表示にする必要があるため、スタイルを規定します
.answer {display: none}
4. js.jsなどのjsファイルを作成します。
今html：
<html> <head> <title></title> <link rel="stylesheet" type="text/css" href="/demo/style.css" /> <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/demo/js.js"></script> </head> <body> <div id="faq"> <p class="question"> 1</p> <p class="answer"> <br /> <br /> </p> <p class="question"> 2</p> <p class="answer"> <br /> </p> <p class="question"> 3</p> <p class="answer"> <br /> <br /> <br /> </p> </div> </body> </html>
次に、スライダーの動作に関するすべてのオプションを検討します。
1.すべてのアイテムが閉じられます。 次に、選択したもののみを開く必要があります。
$(".question").click(function(){ $slider = $(this).next(); if ($slider.is(":hidden")){ $slider.slideDown("slow"); } });
クリックすると、自然に展開する次のコンテナを見つける関数が呼び出されます。 閉じている場合は、展開します。
2. 1つのアイテムが開いていて、閉じる必要があります。
コードを少し変更し、スライダーが表示されているかどうかを確認します。すでに持っています。要素が既に開いている場合にのみ最小化を追加する必要があります。
$(".question").click(function(){ $slider = $(this).next(); if ($slider.is(":hidden")){ $slider.slideDown("slow"); } else{ $slider.slideUp("slow"); } });
3.開いている要素がありますが、閉じた要素の1つを選択します。新しい要素が開き、その前に開く必要があります-カールします。
これを行うには、既に開いている<p class = "answer">を見つけます。 最初にそれらを折りたたみ、次に新しいスライダーを展開します。 クローズ後のオープンは、コールバック関数によって提供されます。 この場合、開いている要素があるかどうか（開いている要素がない場合、開いているスライダーは機能しません）、および開いた要素がクリックされたときと同じかどうかを確認する必要があります（この場合、単に折りたたむ必要があります）。
$(".question").click(function(){ $other = $(this).parent().find(".answer:visible"); $slider = $(this).next(); if ($other.length > 0 && $slider.is(":hidden")){ $other.slideUp("slow", function(){ if ($slider.is(":hidden")){ $slider.slideDown("slow"); } else{ $slider.slideUp("slow"); } }); } });
そして、3つのケースすべてを1つのスクリプトに結合すると、次のようになります。
$(document).ready(function(){ $(".question").click(function(){ $other = $(this).parent().find(".answer:visible"); $slider = $(this).next(); if ($other.length > 0 && $slider.is(":hidden")){ $other.slideUp("slow", function(){ if ($slider.is(":hidden")){ $slider.slideDown("slow"); } else{ $slider.slideUp("slow"); } }); } else { if ($slider.is(":hidden")){ $slider.slideDown("slow"); } else{ $slider.slideUp("slow"); } } }); });
申込み
最初に頭に浮かぶのはメニューです。 たとえば、第1レベルのリンクがどこにもつながっていない場合。
私が開発しているプロジェクトでは、通常、質問と回答（FAQ）セクションを使用します。 原則として、例はFAQの表示の簡易版です:)。
最初のパンケーキがゴツゴツと出てこず、誰かを助けたのではないかと思います。
ありがとう