開閉式のグローバルメニュー（jQuery使用）について

初めは[menu]の文字のみ表示で
クリックすると中身が表示されるグローバルメニューのwebサイト(pc)を作成しています。
クリックアクションで矢印の向きが変わると同時にスライドダウンで
グローバルメニューが表示されるという仕組みにしたいです。
また、[menu]部分を再クリックで閉じると同時に矢印の向きも元に戻したいです。

###発生している問題・エラーメッセージ

矢印の向きには成功したのですが、
メニューが開くとともにすぐになくなってしまいます。
矢印の実装をする前まではクリック後に表示がキープされていたのですが
現在はキープされない状況になってしまいました。

###該当のソースコード

header記載部分

###矢印のCSS(こちらは成功しています)

.menu-toggle::after {
border-bottom: 3px solid #fff;
border-right: 3px solid #fff;
content: "";
display: block;
height: 11px;
left: 38px;
position: absolute;
top: 28px;
transform: rotate(45deg);
width: 11px;
}

kei344

2017/05/12 05:47

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

har

2017/05/12 05:59

ご不便をおかけし申し訳ありませんでした。教えていただきありがとうございます！

kei344

2017/05/12 06:03

ここは「質問への追記・修正、ベストアンサー選択の依頼」です。解決済にしても本文を編集することが出来ますので、よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

＞＞メニューが開くとともにすぐになくなってしまいます。

という部分がなぜなのかわかりませんでしたが、動作としては下記コードを実行した時のような感じでいかがでしょうか。よろしければご確認いただければとおもいます。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
</head>

<body>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
        $(function () {
            $(".menu-toggle").on("click", function () {
                $(this).next().slideToggle();
                if ($(this).hasClass("active")) {
                    $(this).removeClass("active");
                } else {
                    $(this).addClass("active");
                }
            });
        });
        $(window).resize(function () {
            var win = $(window).width();
            var p = 2000;
            if (win > p) {
                $("#menu").show();
            } else {
                $("#menu").hide();
            }
        });
    </script>
    <style>
        .frame {
            width: 1000px;
            margin: 0 auto;
        }
        
        .toggleContents {
            display: none;
            background: red;
            padding: 10px;
        }
        
        .toggleContents:last-child {
            background: green;
        }
        
        .menu-toggle {
            background: black;
            padding: 10px;
            position: relative;
            color: white;
        }
        
        .menu-toggle:after {
            border-bottom: 3px solid #fff;
            border-right: 3px solid #fff;
            content: "";
            display: block;
            height: 11px;
            right: 38px;
            position: absolute;
            top: 10px;
            transform: rotate(45deg);
            width: 11px;
            transition: 0.6s;
        }
        
        .menu-toggle.active:after {
            transform: rotate(225deg);
            top: 18px;
        }
    </style>
    <nav>
        <div class="frame">
            <p class="menu-toggle">とぐるぼたん</p>
            <div class="toggleContents">
                <ul>
                    <li>マリオさああああああああああああああああん</li>
                    <li>マリオさああああああああああああああああん</li>
                    <li>マリオさああああああああああああああああん</li>
                    <li>マリオさああああああああああああああああん</li>
                    <li>マリオさああああああああああああああああん</li>
                </ul>
            </div>
            <p class="menu-toggle">とぐるぼたん</p>
            <div class="toggleContents">
                <ul>
                    <li>ルイージさああああああああああああああああん</li>
                    <li>ルイージさああああああああああああああああん</li>
                    <li>ルイージさああああああああああああああああん</li>
                    <li>ルイージさああああああああああああああああん</li>
                    <li>ルイージさああああああああああああああああん</li>
                </ul>
            </div>
        </div>
    </nav>
</body>

</html>

投稿2017/05/12 05:49