JSでナビゲーションメニュー内のサブメニューをいくつかの方法で実現する

最近整理了，JS 实現ナビゲーションメニュー内の二級ドロップダウンメニューの三種の方法、プロジェクトへの適用を容易にしました。

　ナビゲーションメニューの二级下拉メニューはどうやって実現しますか？

　　淘宝、搜狐などの大手ウェブサイトで使用されている二级下拉メニューが見られます。以下の画像がその例です。

しかし、同様の画像を実現するにはどうすればいいのでしょうか？実際には少なくとも3つの方法があります。以下にコードを示します。

1.HTMLとCSSのみを使用して

<メタチャラセット="UTF-8">
<タイトル>ドキュメント</タイトル>
<スタイル>
*{マージン:0;パディング: 0;リスト-スタイル: none;テキスト-装飾: none;}
#nav{幅: 500px;高さ: 40px;background: #ccc;margin: 0 auto;}
ul{background: #aaa}
ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;}
ul li:hover{background: #cea;}
ul li ul li{float: none;}
/*重要なポイント1：二级メニューを display:none; に設定します*/
ul li ul{position: absolute;top:40px;left: 0; display: none;}
ul li ul li:hover{background: red;}
/*重要なポイント2：二级メニューの従属する一级メニューを hover したときに display:block; に設定します*/
ul li:hover ul{表示:ブロック;}
</style>
<div id="nav">
  <ul>
    <li><a href="">ホーム</a></li>
    <li><a href="">車</a>
      <ul>
        <li><a href="#">アウディ</a> </li>
        <li><a href="#">道奇</a> </li>
      </ul>
    </li>
    <li><a href="">携帯</a>
      <ul>
        <li><a href="#">小米</a> </li>
        <li><a href="#">華为</a> </li>
      </ul>
    </li>
    <li><a href="">連絡先</a></li>
  </ul>
</div>

　　この方法は非常に良いもので、構造と表現の完全な分離を保証しています。

2.javascriptを使用して

<メタチャラセット="UTF-8">
<タイトル>ドキュメント</タイトル>
<スタイル>
*{マージン:0;パディング: 0;リスト-スタイル: none;テキスト-装飾: none;}
#nav{幅: 500px;高さ: 40px;background: #ccc;margin: 0 auto;}
ul{background: #aaa}
ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;}
ul li:hover{background: #cea;}
ul li ul li{float: none;}
ul li ul{position: absolute;top:40px;左: 0; 表示:非表示;}
ul li ul li:hover{background: red;}
</style>
<div id="nav">
  <ul>
    <li><a href="#">ホーム</a></li>
    <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">車</a>
  <!-- 重要なポイント1：二级タイトルの従属する一级タイトルタグ内に時間実行プログラムを設定し、thisはこのli要素を指します -->
      <ul>
        <li><a href="#">アウディ</a> </li>
        <li><a href="#">道奇</a> </li>
      </ul>
    </li>
    <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">携帯</a>
      <ul>
        <li><a href="#">小米</a> </li>
        <li><a href="#">華为</a> </li>
      </ul>
    </li>
    <li><a href="#">連絡先</a></li>
  </ul>
</div>

javascriptを使用して実現するのは複雑で、ここでは構造と行動が分離されていません（DOMを使用してjavascriptで構造と行動を分離することは可能ですが、非常に複雑です）。推奨しません。

3.jQueryを使用して

　　jQueryはjavascriptのライブラリであり、jQueryの公式ウェブサイトから最新バージョンのライブラリファイルをダウンロードできます。圧縮ファイルは製品用で、圧縮されていないファイルは開発者が学習やデバッグに便利です。コンピュータにダウンロードした後、HTMLにライブラリファイルを参照する必要があります。jQueryは本質的にJavaScriptであるため、参照方法は以下の通りです：

　　　　<スクリプトsrc="パス名"></スクリプト>　　

jQueryを使用して二级下拉メニューを実現するコードは以下の通りです：

<メタチャラセット="UTF-8">
<タイトル>ドキュメント</タイトル>
<スタイル>
*{マージン:0;パディング: 0;リスト-スタイル: none;テキスト-装飾: none;}
#nav{幅: 500px;高さ: 40px;background: #ccc;margin: 0 auto;}
ul{background: #aaa}
ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;}
ul li:hover{background: #cea;}
ul li ul li{float: none;}
ul li ul{position: absolute;top:40px;left: 0; display: none;}
ul li ul li:hover{background: red;}
</style>
<div id="nav">
  <ul>
    <li><a href="">ホーム</a></li>
    <li class="navmenu"><a href="">車</a>
      <ul>
        <li><a href="#">アウディ</a> </li>
        <li><a href="#">道奇</a> </li>
      </ul>
    </li>
    <li class="navmenu"><a href="">携帯電話</a>
      <ul>
        <li><a href="#">小米</a> </li>
        <li><a href="#">華为</a> </li>
      </ul>
    </li>
    <li><a href="">連絡先</a></li>
  </ul>
</div>

　明らかに、jQueryを使用するのは非常に便利です。

最終的な実装効果は以下の通りです；

一级メニューをマウスでホバーすると、対応する二级メニューが表示されます。

　ご覧いただきありがとうございます。皆様のサポートに感謝します。

基本教程