アコーディオン効果を実現するネイティブ js

アコーディオン効果を実現するネイティブ js

実際の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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • アコーディオン効果を実現する純粋なjsコード
  • ReactJS を使用して、タブページの切り替え、メニューバーの切り替え、アコーディオンの切り替え、プログレスバーの効果を実装します。
  • jsを使用してシンプルなアコーディオン効果を実現する
  • ネイティブ js で作成されたアコーディオン効果ナビゲーション メニュー
  • Vue.js アコーディオン メニュー コンポーネントの開発例
  • jsは折りたたみ可能で拡張可能なアコーディオンメニューの効果を実現します
  • アコーディオン効果を実現する純粋なjs
  • JSは画像のアコーディオン効果を実現します
  • 垂直アコーディオン効果を実現するネイティブJS
  • アコーディオン効果を実現する HTML5 js

<<:  MySQL 5.7.27 のダウンロード、インストール、設定に関する詳細なチュートリアル

>>:  Nginx Rewrite の使用シナリオとコード例の詳細な説明

推薦する

MySQL マルチバージョン同時実行制御 MVCC の基本原理の分析

目次1 トランザクションの同時実行で発生する問題1.1 ダーティリード1.2 繰り返し不可能な読み取...

DevUI で独自の Angular コンポーネント ライブラリを構築する方法

目次序文コンポーネントライブラリの作成主要な構成の変更ディレクトリレイアウトの調整ライブラリ構築のた...

CSSにスティッキー効果を追加する方法

前面に書かれたfilter:blur と filter:contrast がこのような素晴らしい化学...

MySQL での IN データボリュームの使用の最適化された記録

MySQL のバージョン番号は 5.7.28 です。テーブル A には 390 万件のレコードがあり...

Google Chromeの自動入力問題に対する完璧な解決策

Google Chrome では、ログインに成功すると、パスワードを記憶するかどうかを尋ねるメッセー...

Linux の crw、brw、lrw などのファイル属性は何ですか?

ファイルとは何ですか?すべてのファイルは実際には文字列のストリームですが、適切な解析方法を使用すると...

MySQL Community Server 圧縮パッケージのインストールと設定方法

今日は、MySQL をインストールしたかったので、公式 Web サイトにアクセスして、MySQL の...

MySQL ソートの原則とケース分析

序文ソートはデータベースの基本的な機能であり、MySQL も例外ではありません。ユーザーは、Orde...

LINUX ポートが占有されているかどうかを確認します

ポートが占有されているかどうかは、これまで一度もわかりませんでした。多くの人に尋ねて、ようやくわかり...

ウェブサイトのデザイン体験のための7つの異なるカラースキーム

ウェブサイト構築におけるカラーマッチングは非常に特殊であり、ウェブサイトのテーマ、感情、雰囲気などの...

SNMP4J サーバー接続タイムアウト問題の解決策

弊社のネットワーク管理センターは管理センター兼サーバーとして機能します!各管理対象デバイスは、TCP...

Linux システム構成 (サービス制御) の詳細な紹介

目次序文1. システムサービス制御1. システムctl 2. ターゲット3. 共通システムサービス4...

Vue フロントエンドの Excel ファイルのエクスポートの詳細な実装計画

目次1. 技術の選択2. 技術的な実装vue-json-excelプラグインを使用して実装1. vu...

DockerはホストのMysql操作に接続します

今日、会社のプロジェクトでは docker を設定する必要があります。Windows に正常にインス...

docker 環境でのデータベース バックアップ (postgresql、mysql) のサンプル コード

目次posgresql バックアップ/リストアMySQL バックアップ/復元posgresql バッ...