yujiokayama
8/17/2017 - 2:15 AM

アコーディオンメニュー（第三階層まで対応） 第一階層を開くと他のアコーディオンメニューが閉じます。

アコーディオンメニュー（第三階層まで対応） 第一階層を開くと他のアコーディオンメニューが閉じます。

ac-3.html
content_copyfile_download
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>タイトル</title>
</head>

<body>
    <div style="background:#f67ea9; padding:7px 10px; font-size:80%; font-weight:bold; margin:0 0 10px;">
        アコーディオンメニュー 1つのみ開く
    </div>
    <!-- ===アコーディオンメニュー 閉まるタイプ=== -->
    <ul class="acMenu">
        <li>
            <dl>
                <dt>カテゴリ１</dt>
                <dd>
                    <ul>
                        <li class="acMenu2">
                            <p>メニュータイトル1-1</p>
                            <ul>
                                <li>メニュータイトル1-1-1</li>
                                <li>メニュータイトル1-1-2</li>
                                <li>メニュータイトル1-1-3</li>
                                <li>メニュータイトル1-1-4</li>
                            </ul>
                        </li>
                        <li><a href="#non">メニュータイトル1-2</a></li>
                        <li><a href="#non">メニュータイトル1-3</a></li>
                    </ul>
                </dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>カテゴリ２</dt>
                <dd>
                    <ul>
                        <li><a href="#non">メニュータイトル2-1</a></li>
                        <li><a href="#non">メニュータイトル2-2</a></li>
                        <li><a href="#non">メニュータイトル2-3</a></li>
                    </ul>
                </dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>カテゴリ３</dt>
                <dd>
                    <ul>
                        <li>
                        </li>
                        <li><a href="#non">メニュータイトル3-2</a></li>
                        <li><a href="#non">メニュータイトル3-3</a></li>
                    </ul>
                </dd>
            </dl>
        </li>
    </ul>
    <!-- /.acMenu -->
    <!-- ===アコーディオンメニュー FIN=== -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
    function acdMenu() {
        //デフォルトでアコーディオンの中身を非表示
        $(".acMenu dd").css("display", "none");
        $(".acMenu2 ul").css("display", "none");

        //第2階層のアコーディオン　
        $(".acMenu dt").click(function() {
            $(".acMenu dt").not(this).next().slideUp("fast");
            $(this).next().slideToggle("fast");
        });

        //第3階層のアコーディオン
        $(".acMenu2 p").click(function() {
            $(this).toggleClass("openAcd").next().slideToggle("fast");
        });
    }

    $(function() {
        acdMenu();
    });
    </script>
</body>

</html