Web ページを作成するときに、クールでスムーズなドロップダウン メニューが必要になることがあります。最も基本的な CSS と JS を使用してこれを完成させることもできますが、jQuery を使用すると、次の効果を実現するために必要なのは非常に短いコードだけです。 とても滑らかじゃないですか?マウスがターゲットに移動すると、ドロップダウン メニューが自動的に表示されます。必要なコードは 2 行だけです。 $(" ").hover(関数() { $(this).children(" ").slideToggle(); }); このうち、ホバーはマウスが通過して去るのを合成した言葉で、通常は次のように表記されます。 $(" ").hover(関数() { $(this).children(" ").slideDown() ); }、 関数() { $(this).children(" ").slideUp() ); }); つまり、マウスが通過したときとマウスが離れたときの 2 つの関数を hover に記述し、2 つをコンマで区切ります。ただし、上記のコードでは関数を 1 つしか記述していないことがわかります。これは、hover に関数を 1 つだけ記述すると、マウスが通過したときや離れたときに効果が繰り返されるため、記述が簡単になるためです。 全体のコードでは次のように使用します。 <!DOCTYPE html> <ヘッド> <メタ文字セット="UTF-8"> <スタイル> * { マージン: 0; パディング: 0; } li { リストスタイルタイプ: なし; } { テキスト装飾: なし; フォントサイズ:20px; } .nav { マージン: 100px; } .nav>li { 位置: 相対的; フロート: 左; 幅: 80ピクセル; 高さ:50px; テキスト配置: 中央; } .nav li a { 表示: ブロック; 幅: 100%; 高さ: 100%; 行の高さ: 50px; 色: 黒; border:1px ソリッドスカイブルー; } .nav>li>a:hover { 背景色: ピンク; } .nav ul { 表示: なし; 位置: 絶対; 上: 50px; 左: 0; 幅: 100%; 左境界線: 1px 実線 #FECC5B; 右境界線: 1px 実線 #FECC5B; } .nav ul li { 下境界線: 1px 実線 #FECC5B; } .nav ul li a:hover { 背景色: #FFF5DA; } </スタイル> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <本文> <ul class="nav"> <li> <a href="#" >メッセージ</a> <ul> <li> <a href="">フォロー</a> </li> <li> <a href="">コメント</a> </li> <li> のように </li> </ul> </li> <li> <a href="#" >メッセージ</a> <ul> <li> <a href="">フォロー</a> </li> <li> <a href="">コメント</a> </li> <li> のように </li> </ul> </li> <li> <a href="#" >メッセージ</a> <ul> <li> <a href="">フォロー</a> </li> <li> <a href="">コメント</a> </li> <li> のように </li> </ul> </li> </ul> <スクリプト> $(関数() { $(".nav>li").hover(function() { $(this).children("ul").slideToggle(); }); }) </スクリプト> </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySql のインデックス、ロック、トランザクションの知識ポイントのまとめ
>>: VMware Tools を最初からインストールするための詳細な手順 (グラフィック チュートリアル)
ユーザーがログアウトした後、ブラウザの戻るボタンがクリックされると、Web アプリケーションは保護さ...
1. Docker コンテナのホスト マシンに入り、指定されたイメージを実行しているコンテナ ID ...
私は頻繁にシステムをインストールするので、インストールのたびにいくつかのソフトウェアを再インストール...
この記事では、MySQL で find_in_set() 関数を使用して where in() の順...
React は Facebook の社内プロジェクトとして始まりました。 React の出現は革命的...
実稼働環境で Docker を使用する場合、多くの場合、データを複数のコンテナ間で永続化または共有す...
序文Workbench が 1 台のコンピューターにインストールされており、別の Ubuntu サー...
目次序文1. プロジェクトアーキテクチャ2. Echart公式サイトにアクセスして自己分析を学ぶ2....
導入今日は Python でデータベースに接続する方法を学んだので、MySQL データベースをインス...
原因は、プロセスが特定の時点でシステム制限を超える数のファイルと通信リンクを開くことです。 システム...
CSS を使用して要素の円弧の動きを制御する方法CSS3 の新しい属性 transfrom トランジ...
SELECT ステートメントの完全な構文は次のとおりです。 (7)選択 (8) DISTINCT ...
基本的な構文: <input type="hidden" name=&qu...
目次(I) Workbenchを使用してデータベースを操作する①データベースを作成する② データベー...
私はmysql ERROR 1045に遭遇し、この問題に長い時間を費やしました。私はそれを自分で書き...