実際のWebページ開発でも、アコーディオンは頻繁に登場します。 簡単なアコーディオンを作ったのですが、トランジション効果が発揮されず、コンテンツリストが唐突に表示されるように感じました。効果画像は以下の通りです。 実装コードは次のとおりです。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>アコーディオン</title> <スタイル> 体、 ul { パディング: 0; マージン: 0; } li { リストスタイル: なし; } .nav { 幅: 150ピクセル; 高さ: 310px; 上マージン: 30px; 左マージン: 50px; フォントサイズ: 20px; 境界線: 1px 実線 #ccc; } .nav>ul>li:n番目の子(2n+1) { 背景色: cadetblue; } .nav>ul>li:n番目の子(2n+2) { 高さ: 160px; 表示: なし; 遷移: すべて 1; } .nav>ul>#選択済み{ 背景色: rgb(46, 115, 117); } .nav>ul>li:n番目の子(2) { 表示: ブロック; } </スタイル> </head> <本文> <div class="nav"> <ul> <li id="selected">タイトル 1</li> <li> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </li> <li>タイトル 2</li> <li> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </li> <li>タイトル 3</li> <li> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </li> <li>見出し 4</li> <li> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </li> <li>タイトル 5</li> <li> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </li> <li>タイトル 6</li> <li> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </li> </ul> </div> <スクリプト> var title = document.querySelectorAll(".nav>ul>li:nth-child(2n+1)"); (var i = 0; i < title.length; i++) { title[i].onmouseover = 関数 () { (var j = 0; j < title.length; j++) { title[j].nextElementSibling.style.display = "なし"; タイトル[j].id = ""; } this.id = "選択済み"; this.nextElementSibling.style.display = "ブロック"; } } </スクリプト> </本文> </html> トランジション効果は、コード transition: all 1s; で追加されます。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL 5.7.27 のダウンロード、インストール、設定に関する詳細なチュートリアル
>>: Nginx Rewrite の使用シナリオとコード例の詳細な説明
目次1 トランザクションの同時実行で発生する問題1.1 ダーティリード1.2 繰り返し不可能な読み取...
目次序文コンポーネントライブラリの作成主要な構成の変更ディレクトリレイアウトの調整ライブラリ構築のた...
前面に書かれたfilter:blur と filter:contrast がこのような素晴らしい化学...
MySQL のバージョン番号は 5.7.28 です。テーブル A には 390 万件のレコードがあり...
Google Chrome では、ログインに成功すると、パスワードを記憶するかどうかを尋ねるメッセー...
ファイルとは何ですか?すべてのファイルは実際には文字列のストリームですが、適切な解析方法を使用すると...
今日は、MySQL をインストールしたかったので、公式 Web サイトにアクセスして、MySQL の...
序文ソートはデータベースの基本的な機能であり、MySQL も例外ではありません。ユーザーは、Orde...
ポートが占有されているかどうかは、これまで一度もわかりませんでした。多くの人に尋ねて、ようやくわかり...
ウェブサイト構築におけるカラーマッチングは非常に特殊であり、ウェブサイトのテーマ、感情、雰囲気などの...
弊社のネットワーク管理センターは管理センター兼サーバーとして機能します!各管理対象デバイスは、TCP...
目次序文1. システムサービス制御1. システムctl 2. ターゲット3. 共通システムサービス4...
目次1. 技術の選択2. 技術的な実装vue-json-excelプラグインを使用して実装1. vu...
今日、会社のプロジェクトでは docker を設定する必要があります。Windows に正常にインス...
目次posgresql バックアップ/リストアMySQL バックアップ/復元posgresql バッ...