スマホのときだけslideToggleがうまく機能しない

Question

前提・実現したいこと

パソコンでは問題なく機能しているslideToggleをスマホでもうまく機能させたい。

発生している問題

要素をslideToggleで開閉させています。開閉させるボタンはクリックすると「read more」から「close」に切り替えるようにしています。

パソコンでは問題なく機能しています。スマホ（Android）では開閉ボタンをクリックして開くところまで良いのですが、開いた状態で画面を上下スライドさせると勝手に閉じてしまいます。

ボタンをクリックしていない状態で閉じるので、開閉ボタンも本来「read more」と表示されるはずが「close」のままになってしまいます。

スマホでスライドしても開いている要素を勝手に閉じないようにしたいこと、
開閉ボタンを押す、または別ページに移ることで閉じるようにしたいです。

追記
・Androidバージョン7.0　機種HUAWEI
・ブラウザchrome
・iosでは確認はできていません。
・loadイベントだけでresizeイベントは行っていない。

該当のソースコード

下のコードにあるshop_boxが７つある状態です。

<div id="shop_main">
    <div class="shop_main_inner clearfix">
        <div class="shop_box">
           <a href="#" target="_blank">
              <div class="shop_imag">
                <img src="/images/shop01.jpg" alt="">
              </div>
               <div class="shopHover-box">
                      <div class="shopHover-tet">詳しく見る</div>
               </div>
          </a>
          <div class="shop_name">
          <h2 class="shop_name_title">
              <a href="#" target="_blank">お店０１</a>
          </h2>
       </div>   
    </div>
   </div>   
</div>                                 

#shop_main {
  width: 100%;
  padding: 50px 0 20px 0; }

.shop_main_inner {
  width: 75%;
  margin: 0 auto; }

.shop_box {
  float: left;
  width: -webkit-calc(100% / 3 - 28px);
  width: -moz-calc(100% / 3 - 28px);
  width: -o-calc(100% / 3 - 28px);
  width: calc(100% / 3 - 28px);
  margin: 0 0 30px 42px; }

.shopLink {
  display: block;
  width: 100%;
  position: relative; }

.shop_imag {
  width: 100%;
  height: auto; }
  .shop_imag img {
    width: 100%;
    display: block; }

.shopHover-box {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  background: rgba(61, 61, 61, 0.8);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease; }

.shopHover-tet {
  font-size: 1.4em;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 36px;
  margin: -18px 0 0 -60px;
  border: solid 2px white;
  text-align: center;
  z-index: 1;
  line-height: 35px; }

.shop_name {
  padding-top: 17px; }
  .shop_name .shop_name_title {
    font-size: 1.5em;
    text-align: center; }
    .shop_name .shop_name_title a {
      text-decoration: underline; }

#shop_button {
  width: 100%;
  text-align: center;
  padding-top: 20px;
  cursor: pointer; }
  #shop_button span {
    display: inline-block;
    font-size: 1.5em;
    padding: 8px 0;
    border: solid 1px black;
    box-sizing: border-box;
    width: 13%;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease; }
    #shop_button span:hover {
      background: black;
      letter-spacing: 2px;
      color: white; }

@media screen and (max-width: 768px) {

  #shop_main {
    padding: 35px 0 20px 0; }

  .shop_main_inner {
    width: 85%; }

  .shop_box {
    margin: 0 0 30px 10px;
    width: -webkit-calc(100% / 2 - 5px);
    width: -moz-calc(100% / 2 - 5px);
    width: -o-calc(100% / 2 - 5px);
    width: calc(100% / 2 - 5px); }
    .shop_box:nth-child(2n-1) {
      margin-left: 0; }

  #shop_button span {
    width: 49%; }

//jQueryバージョン1.11.1

var iwW = $(window).innerWidth();
//お店の数によってボタン表示・非表示
function Shoplist(){
 if (iwW > 768) {
    // PCの処理 
     $("#shop_main").each(function () {//.shop_boxの数をカウント
       var num = $(this).find('.shop_box').length;
       if(num > 3){//.shop_boxが3件よりも多かったら
          $('.shop_box').eq(2).show(); // 追加。
          $('.shop_box:nth-child(n + 4)').hide();
          $(this).find('#shop_button').css('display','block');
        }
        else {
          $(this).find('#shop_button').css('display','none');
          
        }
      });
 }  
    else {
    // SPの処理
     $("#shop_main").each(function () {//.shop_boxの数をカウント
      var num = $(this).find('.shop_box').length;
       if(num > 2){//.shop_boxが2件よりも多かったら
          $('.shop_box').eq(1).show(); // 追加。
          $('.shop_box:nth-child(n + 3)').hide();
          $(this).find('#shop_button').css('display','block');
        }
        else {
          $(this).find('#shop_button').css('display','none');   
        }
      });
    
    }    
}
// 開閉の処理
function Shoplistdoor(){
    $('#shop_button').on('click','span',function(){
       if (iwW > 768) {
          $('.shop_box:nth-child(n + 4)').slideToggle();
       }
       else {
          $('.shop_box:nth-child(n + 3)').slideToggle();
       }  
       var self = $(this);
        self.fadeOut("linear", function(){
            if (self.data('opened')) {
                self.text('read more');
                self.data('opened', false);
            } else {
                self.text('Close');
                self.data('opened', true);
            }
            self.fadeIn("linear");
        });
   });
}

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

Answer 1

以下ご確認ください。

・iphoneでも同じ現象が起こりますでしょうか。
・androidで発生している機種/バージョンは何ででしょうか。他の機種でも発生するでしょうか。
・#shop_buttonのクリックエリアがandroidだけ広いということはないでしょうか。
・resizeイベントを記述していて、それが誤作動しているとかはないでしょうか。

Comments

[goligo]

質問して頂いてる内容を追記しました。
また、クリックエリアが広いということはなさそうです。開閉ボタン近くをクリックしても何も反応しませんが、画面のどこかしら上下にスライドさせると要素が閉じてしまいます。

[w.kensington]

追記ありがとうございます。
chromeで発生していること、上下スライド時に発生してしまうことから、やはりresizeイベントが発生している気がします。

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

こちらの処理ですが、参考ソースではShoplistのほうにresizeが入っていますが、実際のソースのほうではShoplistdoorのほうにもresizeが入っていませんでしょうか。

調べた限りでは以下の記事に該当すると思います。（google翻訳で内容わかります）
https://stackoverflow.com/questions/23010931/android-chrome-slidetoggle-closing-on-scroll

[goligo]

ご回答ありがとうございます。
自分でも検証した結果、やはりShoplistのresizeが影響していたようです。w.kensingtonさんが言うとおり、slidetoggleによってサイズが変更されるたびにresizeが行われていました。解決策として、resizeは画面サイズが変更された１回だけ行うようにしました。解決に至った記事は以下です。
http://cly7796.net/wp/javascript/do-processing-once-only-when-carrying-out-the-resizeing-or-scrolling/
お騒がせしました。ありがとうございました。