JSでドロップダウンメニューの表示・非表示を実装する-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JSでドロップダウンメニューの表示・非表示を実装する

黄舟

Nov 16, 2017 pm 04:05 PM

javascript ドロップダウンメニュー隠れる

前回の記事では、ドロップダウンメニューの表示・非表示をJSで実装するコードを紹介しました。今日は、ドロップダウンメニューの表示・非表示をJSで実装したものを紹介します。ドロップダウンメニュー！

この記事では、JavaScript スクリプトを使用してドロップダウンメニューを表示および非表示にします。 JavaScript メソッドを使用して実装するために必要な知識は次のとおりです:

1) JS イベント: onmouseover マウス通過イベントと onmouseout マウス離脱イベント。
2) 基本的な JS 構文: function キーワードを使用して関数を定義します。
3) DOM プログラミング: getElementsByTagName() メソッド。
次のステップは制作プロセスです:
1) セカンダリメニューを非表示にする: セカンダリメニューを非表示にする CSS スタイルを設定します。
2) showsub() 関数を記述してサブメニューを表示します。getElementsByTagName を使用して 2 番目のメニュー項目を取得し、style.display を通じて 2 番目のメニュー表示を設定します。
3) Hidesub() 関数を作成します。getElementsByTagName を使用して 2 番目のメニュー項目を取得し、style.display を通じて非表示になるように 2 番目のメニューを設定します。
4) マウスイベントの追加: 第 2 レベルのメニューを含む第 1 レベルのメニューにマウスイベントを追加し、showsub()/hidesub() 関数を呼び出して、マウスが通過したときに第 2 レベルのメニューの表示と非表示を実現します。最初のレベルのメニューから。
5) ブラウザの互換性テストを少なくとも 5 つのブラウザで実行します。 IE7、8、9、Firefox、Google、2345ブラウザなど

レンダリング:

HTMLコード:

<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>下拉菜单</title> 
<!--引入的外部CSS样式文件--> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
<!--引入的外部JS脚本文件--> 
<script type="text/javascript" src="script.js"></script> 
</head> 
 
<body> 
<p id="nav" class="nav"> 
 <ul> 
  <li><a href="#">网站首页</a></li> 
  <li onmouseover="showsub(this)" onmouseout="hidesub(this)"><a href="#">课程大厅</a> 
  <ul> 
   <li><a href="#">JavaScript</a></li> 
   <li><a href="#">jQuery</a></li> 
   <li><a href="#">Ajax</a></li> 
  </ul> 
  </li> 
  <li onmouseover="showsub(this)" onmouseout="hidesub(this)"><a href="#">学习中心</a> 
  <ul> 
   <li><a href="#">视频学习</a></li> 
   <li><a href="#">案例学习</a></li> 
   <li><a href="#">交流平台</a></li> 
  </ul> 
  </li> 
  <li><a href="#">经典案例</a></li> 
  <li><a href="#">关于我们</a></li> 
 </ul> 
</p> 
</body> 
</html> 
</span>

ログイン後にコピー

外部CSSスタイルシートstyle.cssファイルコード:

<span style="font-size:18px;">/*CSS全局设置*/ 
*{ 
 margin:0; 
 padding:0; 
} 
.nav{ 
 background-color:#EEEEEE; 
 height:40px; 
 width:450px; 
 margin:0 auto; 
} 
ul{ 
 list-style:none; 
} 
ul li{ 
 float:left; 
 line-height:40px; 
 text-align:center; 
} 
a{ 
 text-decoration:none; 
 color:#000000; 
 display:block; 
 width:90px; 
 height:40px; 
} 
a:hover{ 
 background-color:#666666; 
 color:#FFFFFF; 
} 
ul li ul li{ 
 float:none; 
 background-color:#EEEEEE; 
} 
ul li ul{ 
 display:none; 
} 
/*为了兼容IE7设置的CSS样式，但是又必须写在a:hover前面*/ 
ul li ul li a:link,ul li ul li a:visited{ 
 background-color:#EEEEEE; 
} 
ul li ul li a:hover{ 
 background-color:#009933; 
} 
</span>

ログイン後にコピー

外部JSスクリプトscript.jsファイルコード:

<span style="font-size:18px;">function showsub(li){ 
 var submenu=li.getElementsByTagName("ul")[0]; 
 submenu.style.display="block"; 
} 
function hidesub(li){ 
 var submenu=li.getElementsByTagName("ul")[0]; 
 submenu.style.display="none"; 
}</span>

ログイン後にコピー

概要: この記事では、JS でドロップダウンメニューを表示および非表示にする方法を例を挙げて説明します。皆さんはこれについてある程度の知識と理解を持っていると思います。これがあなたの仕事に役立つことを願っています。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7699

Java チュートリアル

1640

CakePHP チュートリアル

1393

Laravel チュートリアル

1287

PHP チュートリアル

1230

Related knowledge

Win11の入力方式フローティングウィンドウの非表示設定 Dec 30, 2023 pm 11:24 PM

Win11 の入力方式のフローティングウィンドウ機能に慣れておらず、いつも操作に違和感があるため、このフローティングウィンドウ機能をオフにしたいという友達がいます。 win11システム. に従ってください。 win11で入力方法のフローティングウィンドウを非表示にする 1. パソコンの設定キーを開き、「時刻と言語」を選択し、入力後「Enter」をクリック 2. 「キーボードの詳細設定」で「入力方法の切り替え」を探し、「デスクトップ言語」を変更します。「バー」の前にあるチェックマークをクリックし、「言語バーオプション」と入力します。 3. 開いたら、ここで「非表示」をクリックして、言語フローティングウィンドウを閉じます。

WPSテーブルにドロップダウンメニューを作成する方法 Mar 21, 2024 pm 01:31 PM

WPS テーブルのドロップダウンメニューの作成方法: ドロップダウンメニューを設定するセルを選択した後、「データ」、「有効性」の順にクリックし、ポップアップダイアログボックスで対応する設定を行います。メニューをプルダウンします。 WPS は強力なオフィスソフトウェアとして、ドキュメントや統計データテーブルなどを編集する機能を備えており、テキストやデータなどを扱う必要がある多くの人々にとって非常に便利です。 WPSソフトを上手に使って便利に使うためには、WPSソフトの基本的な操作をマスターする必要がありますが、今回は編集部がWPSソフトの使い方を紹介します。表示されるWPSテーブルのダウンメニュー操作を行います。 WPSフォームを開いたら、まず、

Windows 11のタスクバーアイコンを非表示にする方法は？ Jan 06, 2024 am 08:38 AM

win11システムでは、タスクバーのアイコンが煩わしい場合、タスクバー隅のオーバーフローインターフェースでアイコンを非表示にすることができますが、下で開いたアプリケーションのタスクバーのアイコンは非表示にできませんので、以下のエディターに従いましょう。具体的な状況を見てみましょう。 win11 タスクバーアイコンを非表示にする方法: 1. アイコンを中央に配置します。 1. まず、下のタスクバーでアイコンを非表示にしたい場合は、右クリックしてアイコンを選択し、[タスクバーからのピン留めを解除] をクリックします。 2. ただし、開いた場合このアプリケーションを使用中であるため、非表示にすることは不可能です。 2. 右下隅のアイコン 1. 右下隅のアプリケーションアイコンを非表示にしたい場合は、まずシステム設定を開きます。 2. 次に、図に示すように、左側のサイドバーの「個人用設定」をクリックします。 3. 次に、右側のタスクバーをクリックして表示します。

WeChatの友達をブロックしたり削除したりせずに非表示にする方法は? WeChatの友達をブロックしたり削除せずに非表示にする方法 Mar 13, 2024 pm 07:19 PM

WeChatの友達をブロックしたり削除したりせずに非表示にする方法は?友達を非表示にしたいが、その方法がわからないユーザーが多いため、このサイトでは、WeChat の友達をブロックしたり削除したりせずに非表示にする方法をユーザーに丁寧に紹介します。ブロックや削除せずに WeChat の友達を非表示にする方法方法 1: 1. まず WeChat ソフトウェアを開き、WeChat ページでアドレス帳を見つけて、「マイ」をクリックします。 2. 次に、設定ページに入ります。 3. 「プライバシー」オプションを見つけてクリックします。 4. 次に、「彼に見せない」をクリックします。 5. [彼女に表示させない] ページに移動し、[+] をクリックして非表示にしたい友達にチェックを入れます。

Douyinショートビデオの作品を非表示にする方法個人的なビデオ作品を非表示にする方法 Mar 12, 2024 pm 12:49 PM

Douyinショートビデオアプリソフトには多数のショートビデオ作品が用意されており、好きなだけ視聴することができ、全て永久無料で提供されています。さまざまなタイプのライブビデオチャンネルがオープンしており、ビデオコンテンツはすべてオリジナルです。誰もが最も満足できる視聴方法を提供します。アカウントを入力してオンラインにログインすると、誰もが毎日視聴している動画に基づいて正確に推奨される、さまざまな刺激的なショートビデオがプッシュされます。また、生放送ルームに入ってアンカーと対話したりチャットしたりすることもできます。もっと幸せに。個人がアップロードした作品も非表示にすることができます。設定はワンクリックで非常に簡単です。スワイプするとどこからでも見ることができます。上下にスワイプすると、無数のネチズンのリアルタイムのコメントが表示されます。日常生活のダイナミクスを共有することもできます。編集者は詳細なオンライン Douyin ショートビデオを公開しており、ユーザーは個人のビデオ作品を非表示にする方法を求めています。最初に公開された Douyin のショートビデオ

Xiaomi Mi 14でスマートアイランドを非表示にする方法は? Mar 18, 2024 pm 03:40 PM

Xiaomi Mi 14は、驚くべきハードウェア構成と優れた機能に加えて、スマートアイランドという魅力的な場所も隠しています。ここでは、ユーザーはパーソナライズされたカスタマイズと無制限のクリエイティブな携帯電話体験を楽しむことができます。しかし、誰もがこの機能を好むわけではないので、Xiaomi Mi 14はどうやってスマートアイランドを隠すのでしょうか？一緒に調べてみましょう。 Xiaomi Mi 14でスマートアイランドを非表示にする方法は? 1. Xiaomi 14 携帯電話の設定アプリケーションを開きます。 2. スクロールして「機能」オプションを見つけ、クリックして入力します。 3. 機能ページで「スマートアイランドを非表示」オプションを見つけてオンにします。 4. スマートアイランドの非表示がオンになっていることを確認した後、デスクトップに戻ると、スマートアイランドが非表示になっていることがわかります。

Douyin での作品の非表示に関する詳細なチュートリアル Mar 25, 2024 pm 03:11 PM

1.まず[+]をクリックして撮影します。 2. 右下のチェックマークをクリックして撮影完了を確認します。 [次へ]をクリックし、3. [閲覧できるユーザー]をクリックします。 [プライベート] を選択するだけですシナリオ 2: 作品が取得されました 1. [自分] をクリックし、[仕事] を選択します。 2. 右側の[3 点]のロゴをクリックします。 3. 左にスワイプして [権限設定] を見つけます。 4. [非公開に設定] をクリックします。

Steam の隠れたゲームはどこにありますか? Feb 24, 2024 am 11:37 AM

Steam では見たくないゲームを非表示にすることができます。では、その非表示のゲームはどこにあるのでしょうか?プレイヤーはビュー内の非表示ゲームをクリックして、非表示ゲームコンテンツを見つけることができます。Steam 上の非表示ゲームの場所についてのこの紹介では、具体的な方法を説明します。以下は詳細な紹介です。ぜひご覧ください。「Steam 使い方チュートリアル」 Steam の隠しゲームはどこにありますか? 回答: ビュー内の非表示のゲームをクリックします。具体的な方法: 1. まず、ソフトウェア内のビューをクリックし、非表示のゲームをクリックします。 2. クリックすると、左側のメニューに隠れたゲームが表示されます。ゲームを非表示にする方法: 1. まず、ゲームライブラリをクリックします。 2. ゲームを選択し、右クリックして「管理」を選択します。 3. このゲームを非表示にすることを選択します。

See all articles

JSでドロップダウンメニューの表示・非表示を実装する

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック