jqueryプラグイン制作アコーディオンパネルエフェクト実装_jquery

まず、引き続き、次の HTML 構造を含む HTML ファイルを作成します。

コードをコピー コードは次のとおりです: 最初のペイン このスクリプトでは、一度に 1 つのペインのみを表示できるようにする必要があります。 ; ; 2 番目のペイン 一度に表示できるペインは 1 つだけです。

;p>

次の CSS を定義します:

コードをコピーします🎜> コードは次のとおりです: #pane-container { margin : 0; 幅: 200px; .pane h1 { カーソル: 位置:相対; 背景色: #4c4c4c; フォントサイズ: 20px; ; 🎜>.pane p { padding: 10px; margin: 0; background-color: # e4e4e4;

ここで、jquery.accordtion.js プラグインの実装を紹介します。最初に考慮する必要があるのは、ペインのコンテンツ部分 (p タグ) を非表示にする方法です。タイトルのh1は隠す必要はありません。

コードをコピー

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

(function ($) { $.fn .accordtion = function () { return this.each(function () { $(this).find('p').hide(); }); } })(jQuery);

ページによって呼び出されるコード: コードをコピー コードは次のとおりです。

$(document).ready(function () { $('#pane-container').accordtion(); });

プラグイン コードは非常に単純で、クラス ペインのある div の下にある p を見つけて非表示にするだけです。次に実現したいのは、ユーザーが h1 をクリックすると、対応する p タグのコンテンツが表示され、h1 に対応する他の p タグのコンテンツが非表示になることです。コードは次のとおりです:

コードをコピー コードは次のとおりです: //Set h1 タグのクリック イベント self.delegate('h1', 'click', function () { //対応する p タグの slideToggle 効果を設定します $(this).next( 'p').slideToggle(600) //他のペインオブジェクトを取得し、その下の p タグを見つけて閉じます .parent().siblings().children('p').slideUp( 600); });

プラグインは非常にスタイリッシュになったので、最後に行うことは、ユーザー定義の属性オプションを追加することです。 「デフォルトでどのペインが表示されるか」。 コードをコピー コードは次のとおりです:

//表示する要素を設定します self .children(':eq(' options.visibleByDefault ')')//options.visibleByDefault .children('p') .show(); と一致するペイン オブジェクトを検索します。 >

完全なコードを自分で確認するには、デモをダウンロードする必要があります。 jQuery.plugin.accordtion

この記事がお役に立てば幸いです。コードについて不明な点がある場合は、私に連絡してください。

jqueryプラグイン制作 アコーディオンパネルエフェクト実装_jquery

最初のペイン

2 番目のペイン 一度に表示できるペインは 1 つだけです。

jqueryプラグイン制作アコーディオンパネルエフェクト実装_jquery

2 番目のペイン
一度に表示できるペインは 1 つだけです。