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

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

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

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

html
1<div class="accordion">
2  <p class="switch">タイトル</p>
3    <div class="contentWrap displayNone">
4      <ul>
5      <li><a href="test.html">テスト</a></li>
6      <li><a href="test.html">テスト</a></li>
7      <li><a href="test.html">テスト</a></li>
8      </ul>
9    </div>
10</div>

css
1.displayNone {
2display: none;
3}
4.accordion li {
5border-bottom: 1px solid #ccc;
6padding: 10px;
7}
8.accordion a {
9display: block;
10}
11.contentWrap {
12margin: 10px;
13}
14.switch {
15cursor:pointer;
16font-weight: bold;
17padding:10px 40px 10px 10px;
18font-size: 14px;
19background: #eee;
20border-bottom: 1px solid #ccc;
21position: relative;
22}
23
24.switch:after {
25content: ">";
26position: absolute;
27right: 10px;
28top: -100%;
29bottom: -100%;
30margin: auto;
31font-size: 16px;
32height: 16px;
33-moz-transform: rotate(90deg);
34-ms-transform: rotate(90deg);
35-webkit-transform: rotate(90deg);
36transform: rotate(90deg);
37font-family: sans-serif;
38}
39.switch.open:after {
40content: "x";
41}

javascript
1(function($) {
2    // 読み込んだら開始
3    $(function() {
4        // アコーディオン
5        var accordion = $(".accordion");
6        accordion.each(function () {
7            var noTargetAccordion = $(this).siblings(accordion);
8            $(this).find(".switch").click(function() {
9            $(this).next(".contentWrap").slideToggle();
10            $(this).toggleClass("open");
11            noTargetAccordion.find(".contentWrap").slideUp();
12            noTargetAccordion.find(".switch").removeClass("open");
13            });
14        });
15    });
16})(jQuery);

###試したこと

javascript
1$(function() {
2    var w = $(window).width();
3    var x = 640;
4    if (w >= x) {
5   $("div").removeClass("accordion");
6        });
7    }
8});

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

kei344

2017/06/28 15:52

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

Lhankor_Mhy

2017/06/29 03:09

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

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

回答2件

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

JavaScript
1            $(this).find(".switch").click(function() {
2                var w = $(window).width();
3                var x = 640;
4                if (x < w) {
5                    // 処理しない。
6                    return;
7                }
8
9                $(this).next(".contentWrap").slideToggle(400, () => {
10                    $(this).next(".contentWrap").toggleClass('displayNone').css('display', '');
11                });
12                // 以下略
13            });

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

CSS
1@media screen and (max-width: 640px) {
2    .displayNone {
3        display: none;
4    }
5
6    .switch {
7        cursor: pointer;
8    }
9}
10/* afterはどうする？ */

投稿2017/06/29 05:23

x_x

総合スコア13749

ベストアンサー

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

javascript
1var accordion_menu = (function() {   
2    var timer = null;
3    var offset_top1;
4    function checkMobile() {
5        //if (window.matchMedia( "(min-width: 640px)" ).matches) {
6        if (window.innerWidth >= 640) {        
7            return true;        
8        } else {            
9            return false;        
10        }        
11    }
12    
13    function checkWidth() {
14        var menu_title = $("dt");
15        var menu_body = $("dd");
16        $(".panel_title").off("click");
17	    if (checkMobile()) {
18            menu_body.attr("class", "pc_panel_body").css("display", "block");
19            menu_title.attr("class", "pc_panel_title");
20            var menu_icon = menu_title.find("i");
21            menu_icon.removeAttr("class");
22        } else {                
23            menu_body.attr("class", "panel_body").css("display", "none");                
24            menu_title.find("i").attr("class", "icon-chevron-down");                
25            menu_title.attr("class", "panel_title");
26            $(".panel_title").on("click", function() {
27                var menu_icon = $(this).find("i");
28                if($(this).next().css("display") === "block") {
29                    $(this).next().slideUp();
30                    menu_icon.attr("class", "icon-chevron-down");
31                } else {
32                    $(this).next().slideDown();
33                    menu_icon.attr("class", "icon-chevron-up");
34    			}
35            });
36        }        
37    }
38 
39    function getResize() {               
40        try {            
41            window.addEventListener("resize", function() {                    
42                if (checkMobile()) {
43                    changeStyle();
44                }                    
45            }, false);            
46        } catch(e) {        
47            window.attachEvent("resize", function() {
48                if (checkMobile()) {
49                    changeStyle();
50                }                    
51           });                    
52        } 
53    }
54     
55    function changeStyle() {        
56        clearTimeout(timer);
57        timer = setTimeout(function() {
58            		    checkWidth();
59        }, 200);      
60    }    
61    return {
62        checkWidth: checkWidth,
63        getResize: getResize,
64        init: function() {
65            window.onload = function() {
66                checkWidth();
67                getResize();
68            }
69        }        
70     };
71})();
72accordion_menu.init();

html
1<dl id="panel_list">
2<dt class="pc_panel_title">Category1<i></i></dt>
3<dd class="pc_panel_body">Category1<br>Category1<br>Category1<br>Category1<br>Category1<br>Category1<br>Category1</dd>
4</dl>

css
1.panel_title,
2.pc_panel_title {
3    background-color: #ccc;
4    width: 100%;
5    padding: 10px;
6    border-bottom: 1px solid #aaa;
7}
8.panel_title {
9    cursor: pointer;
10}
11.panel_body,
12.pc_panel_body {
13    padding: 8px;
14}
15i {
16    margin-right: 30px;
17    float: right;
18}