質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.99%

jQueryで作成したアコーディオンメニューを一定の画面サイズ以上で全て展開したい

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,364

qemte

score 6

最近HTML、CSS、jQueryを学び始めた初心者です。
こちらのサイト様の記事を参考に、サイト内でアコーディオンメニューを実装しています。
http://www.webmoyou.sakura.ne.jp/web/124/

画面サイズが640px以下の場合はアコーディオンメニュー、それ以上の場合はメニューを全て展開し折りたたまないような仕様にしたいのですが、上手く実装ができません。

該当のソースコード

<div class="accordion">
  <p class="switch">タイトル</p>
    <div class="contentWrap displayNone">
      <ul>
      <li><a href="test.html">テスト</a></li>
      <li><a href="test.html">テスト</a></li>
      <li><a href="test.html">テスト</a></li>
      </ul>
    </div>
</div>
.displayNone {
display: none;
}
.accordion li {
border-bottom: 1px solid #ccc;
padding: 10px;
}
.accordion a {
display: block;
}
.contentWrap {
margin: 10px;
}
.switch {
cursor:pointer;
font-weight: bold;
padding:10px 40px 10px 10px;
font-size: 14px;
background: #eee;
border-bottom: 1px solid #ccc;
position: relative;
}

.switch:after {
content: ">";
position: absolute;
right: 10px;
top: -100%;
bottom: -100%;
margin: auto;
font-size: 16px;
height: 16px;
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
font-family: sans-serif;
}
.switch.open:after {
content: "x";
}
(function($) {
    // 読み込んだら開始
    $(function() {
        // アコーディオン
        var accordion = $(".accordion");
        accordion.each(function () {
            var noTargetAccordion = $(this).siblings(accordion);
            $(this).find(".switch").click(function() {
            $(this).next(".contentWrap").slideToggle();
            $(this).toggleClass("open");
            noTargetAccordion.find(".contentWrap").slideUp();
            noTargetAccordion.find(".switch").removeClass("open");
            });
        });
    });
})(jQuery);

試したこと

$(function() {
    var w = $(window).width();
    var x = 640;
    if (w >= x) {
   $("div").removeClass("accordion");
        });
    }
});


jQueryで特定の画面サイズ以下になった際に、アコーディオンに関連するクラスを全て取り払えばいいと思ったのですが、アコーディオンメニューが残ったままになってしまいます。
このような場合にはどのように対処すべきか、またはもっと上手いコードの書き方について、
皆様の知恵を貸していただけると幸いです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/06/29 00:52

    2つのコードをどのように書いているのでしょうか。

    キャンセル

  • Lhankor_Mhy

    2017/06/29 12:09

    「試したこと」のコードは、かっこの対応がおかしいと思いますので、ご確認ください。

    キャンセル

回答 2

+1

途中でサイズが小さくなっても、すでに適用されたインラインスタイルで非表示になってしまっています。
ちょうどdisplayNoneで非表示にしているようですので、こっちを使うことにして、.slideToggle()では.toggleClass('displayNone')
http://api.jquery.com/slidetoggle/

            $(this).find(".switch").click(function() {
                var w = $(window).width();
                var x = 640;
                if (x < w) {
                    // 処理しない。
                    return;
                }

                $(this).next(".contentWrap").slideToggle(400, () => {
                    $(this).next(".contentWrap").toggleClass('displayNone').css('display', '');
                });
                // 以下略
            });


そして一部のスタイルはメディアクエリへ

@media screen and (max-width: 640px) {
    .displayNone {
        display: none;
    }

    .switch {
        cursor: pointer;
    }
}
/* afterはどうする? */

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

check解決した方法

0

皆様ありがとうございました。
こちらのサイト様のやり方で理想通りの実装ができました。
http://jsdo.it/maechabin/8czt
ここで頂いたご意見の方も参考にさせていただきます。

var accordion_menu = (function() {   
    var timer = null;
    var offset_top1;
    function checkMobile() {
        //if (window.matchMedia( "(min-width: 640px)" ).matches) {
        if (window.innerWidth >= 640) {        
            return true;        
        } else {            
            return false;        
        }        
    }

    function checkWidth() {
        var menu_title = $("dt");
        var menu_body = $("dd");
        $(".panel_title").off("click");
        if (checkMobile()) {
            menu_body.attr("class", "pc_panel_body").css("display", "block");
            menu_title.attr("class", "pc_panel_title");
            var menu_icon = menu_title.find("i");
            menu_icon.removeAttr("class");
        } else {                
            menu_body.attr("class", "panel_body").css("display", "none");                
            menu_title.find("i").attr("class", "icon-chevron-down");                
            menu_title.attr("class", "panel_title");
            $(".panel_title").on("click", function() {
                var menu_icon = $(this).find("i");
                if($(this).next().css("display") === "block") {
                    $(this).next().slideUp();
                    menu_icon.attr("class", "icon-chevron-down");
                } else {
                    $(this).next().slideDown();
                    menu_icon.attr("class", "icon-chevron-up");
                }
            });
        }        
    }

    function getResize() {               
        try {            
            window.addEventListener("resize", function() {                    
                if (checkMobile()) {
                    changeStyle();
                }                    
            }, false);            
        } catch(e) {        
            window.attachEvent("resize", function() {
                if (checkMobile()) {
                    changeStyle();
                }                    
           });                    
        } 
    }

    function changeStyle() {        
        clearTimeout(timer);
        timer = setTimeout(function() {
                        checkWidth();
        }, 200);      
    }    
    return {
        checkWidth: checkWidth,
        getResize: getResize,
        init: function() {
            window.onload = function() {
                checkWidth();
                getResize();
            }
        }        
     };
})();
accordion_menu.init();
<dl id="panel_list">
<dt class="pc_panel_title">Category1<i></i></dt>
<dd class="pc_panel_body">Category1<br>Category1<br>Category1<br>Category1<br>Category1<br>Category1<br>Category1</dd>
</dl>
.panel_title,
.pc_panel_title {
    background-color: #ccc;
    width: 100%;
    padding: 10px;
    border-bottom: 1px solid #aaa;
}
.panel_title {
    cursor: pointer;
}
.panel_body,
.pc_panel_body {
    padding: 8px;
}
i {
    margin-right: 30px;
    float: right;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる