ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery は、縮小可能および拡張可能なカスケード メニューの例を実装します code_javascript スキル

jQuery は、縮小可能および拡張可能なカスケード メニューの例を実装します code_javascript スキル

WBOY
リリース: 2016-05-16 17:12:22
オリジナル
1151 人が閲覧しました

フレームワークを使用せずに純粋な JavaScript コードを使用する場合、カスケード メニューの作成は困難な作業になるかもしれませんが、フレームワークを使用すると、これが非常に簡単になります。これはフレームワークの利点であり、開発効率が大幅に向上します。より信頼性が高く、保守が容易です。 jQuery を使用してカスケード メニューを実装する一般的な手順は次のとおりです:

•1. まず、


    コードをコピーします。 コードは次のとおりです。 "http://www.w3 .org /TR/html4/loose.dtd">


    itcast.cn の JQuery アプリケーション例: ポップアップ メニュー












    •2. カスケード メニューの縮小を制御する JavaScript コードを作成します。


    コードをコピー コードは次のとおりです:// をクリックする必要があります。メインメニュー上 ボタンを押すと、対応するサブメニューが表示されます。サブメニューを再度クリックすると、サブメニューが非表示になります。
    //ページがロードされたら、すべてのメインメニューに onclick イベントを追加する必要があります。 >//メインメニューがクリックできることを確認します。サブメニューを表示または非表示にします
    //登録ページがロードされたときに実行されるメソッド
    $(document).ready(function() {
    //ここで必要になりますまずすべてのメイン メニューを検索します
    //次に、すべてのメイン メニューのクリック イベントを登録します
    // ul
    でノードを検索します var as = $("ul > a");
    as .click(function() {
    // ここでは、現在の ul で li を見つけて、li を表示する必要があります
    // 現在クリックされているノードを取得します
    var aNode = $(this) ;
    //現在の a ノードのバイトポイントのすべての li 兄弟を検索します
    var lis = aNode.nextAll("li");
    //子ノードを表示または非表示にします
    lis.toggle( "show");
    });
    });


    •ラベルの表示効果を制御する CSS ファイルを作成します



    コードをコピー
    コードは次のとおりです: /*すべての li に小さなドットが表示されないようにするには、CSS タグ セレクター*/ を使用できます。 li {
    list-style: none; /* li の前の小さなドットを非表示にします*/
    margin-left: /* インデント効果を実現するためにサブメニューを右に移動します* /
    display: none; /*すべてのサブメニューを最初に非表示にする*/
    }
    a{
    text-decoration: none; /*リンクの下線を非表示にする*/
    }


    jQuery がもたらす利便性:

    1. クリックされたメニューを検索する場合、必要な $(this) は 1 つだけです

    2. ノードを表示または非表示にするには、toggle() という 1 つのステートメントだけが必要です。また、この関数を配列内のすべてのノードに実装することもできます。

    3. 特定のタグの下にあるすべてのタグを検索します: $("ul > a")

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート