【jquery】画面サイズによってslideToggleするボックスの数を変える。

前提・実現したいこと

4つ以上のボックスがあります。768px以上では横に3つ並び、残りは非表示にしてslideToggleで表示できるようにします。767px以下では横に2つ並び、残りは非表示にしてslideToggleで表示できるようにします。

slideToggleはread moreボタンを押すことで発動します。

発生している問題

768px以上から767px以下にリサイズしたときは問題なく表示されます。しかし767px以下から768px以上にリサイズしたときに、３つ並ぶはずのボックスが２つしか表示されません。つまり、767px以下の条件が残ってしまいます。

767px以下から768px以上にリサイズしたときも、768px以上の条件が反映されるようにしたいです。

該当のソースコード

HTML
1<div id="shop_main">
2      <div class="shop_main_inner clearfix">
3           <div class="shop_box">
4               <div class="shop_imag">
5                  <a href="#"></a>
6               </div>
7              <div class="shop_name">
8              　　<h2 class="shop_name_title">お店1</h2>
9              </div>   
10          </div>
11          <div class="shop_box">
12              <div class="shop_imag">
13                 <a href="#"></a>
14             </div>
15             <div class="shop_name">
16                <h2 class="shop_name_title">お店２</h2>
17            　</div>   
18         </div>
19         <div class="shop_box">
20             <div class="shop_imag">
21               　<a href="#"></a>
22             </div>
23            <div class="shop_name">
24               <h2 class="shop_name_title">お店３</h2>
25            </div>   
26         </div>
27         <div class="shop_box">
28            <div class="shop_imag">
29               <a href="#"></a>
30           </div>
31           <div class="shop_name">
32              <h2 class="shop_name_title">お店４</h2>
33           </div>   
34        </div>
35     
36        </div>
37          <div id="shop_button"><span>read more</span></div>  
38        </div>

jQuery：ボックスをカウンして非表示

function Shoplist(){
 
 var iwW = $(window).innerWidth();   

   if (iwW > 768) {
    // 768px以上の処理 
     $("#shop_main").each(function () {//.shop_boxの数をカウント
       var num = $(this).find('.shop_box').length;
       if(num > 3){//.shop_boxが3件よりも多かったら
          $('.shop_box:nth-child(n + 4)').hide();//4件目以降は非表示
          $(this).find('#shop_button').css('display','block');
        }
        else {
          $(this).find('#shop_button').css('display','none');
          
        }
      }); 
    }  
    else {
    // 767px以下の処理
     $("#shop_main").each(function () {//.shop_boxの数をカウント
      var num = $(this).find('.shop_box').length;
       if(num > 2){//.shop_boxが2件よりも多かったら
          $('.shop_box:nth-child(n + 3)').hide();//3件目以降は非表示
          $(this).find('#shop_button').css('display','block');
        }
        else {
          $(this).find('#shop_button').css('display','none');   
        }
      });
    }
}

$(window).on('load resize',Shoplist);

jQuery：slideToggleの定義

function Shoplistdoor(){
    
  var iwW = $(window).innerWidth(); 

    $('#shop_button').on('click','span',function(){
       if (iwW > 768) {
          $('.shop_box:nth-child(n + 4)').slideToggle();
       }
       else {
          $('.shop_box:nth-child(n + 3)').slideToggle();
       }  
   });
}

$(window).on('load',Shoplistdoor);

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

回答1件

ベストアンサー

JavaScript
1       if(num > 3){//.shop_boxが3件よりも多かったら
2          $('.shop_box').eq(2).show(); // 追加。
3          $('.shop_box:nth-child(n + 4)').hide();//4件目以降は非表示

JavaScript
1  $('#shop_button').on('click','span',function(){
2    // 幅は都度取得しなおす。
3    var iwW = $(window).innerWidth(); 
4
5    if (iwW > 768) {
6      $('.shop_box:nth-child(n + 4)').slideToggle();
7    }
8    else {
9      $('.shop_box:nth-child(n + 3)').slideToggle();
10    }  
11  });