アコーディオン効果を実現するネイティブ 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 を応援していただければ幸いです。

以下もご興味があるかもしれません: