瀏覽器調整大小+ slideToggle不能很好地在一起

Question

我有一個響應網站&想在移動版本上做一些slideToggle效果，保持桌面網站完全顯示文字&沒有影響。我爲我的媒體查詢使用了modernizr，只有在窗口大小調整後刷新頁面時，它才起作用。儘管如此，當你調整&嘗試與它進行交互時，這一切都會發生。這並不容易來形容，所以請檢查下面的鏈接：

www.lastpixel.ie/new/test.php

1. 調整大小的瀏覽器 - >刷新 - >點擊項目 - >運行完美
2. 調整大小的瀏覽器 - >點擊項目 - > constant slideToggle

是什麼導致了這種呃逆？

HTML：

<div class="item"> 
      <div class="item-title"> 
       <h2 class="subtitle">Item 1</h2> 
       <div class="icn"></div> 
       <div class="clear"></div> 
      </div> 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
     </div> 

     <div class="item"> 
      <div class="item-title"> 
       <h2 class="subtitle">Item 2</h2> 
       <div class="icn"></div> 
       <div class="clear"></div> 
      </div> 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
     </div> 

     <div class="item"> 
      <div class="item-title"> 
       <h2 class="subtitle">Item 3</h2> 
       <div class="icn"></div> 
       <div class="clear"></div> 
      </div> 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
     </div> 

     <div class="item"> 
      <div class="item-title"> 
       <h2 class="subtitle">Item 4</h2> 
       <div class="icn"></div> 
       <div class="clear"></div> 
      </div> 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
     </div> 

JS：

$(document).ready(function() { 

function doneResizing() { 

    if(Modernizr.mq('screen and (max-width: 870px)')) { 

    $('.item-title').click(function (el) { 

     $(this).next().slideToggle(); 

     $(this).toggleState(function (el) { 

      el.animate({ 
       backgroundColor: "#333", 
       'color': "#fff" 
      }, 500); 

      }, function (el) { 
      el.animate({ 
       backgroundColor: "#e7e7e7", 
       'color': "#000" 
      }, 500); 
     }); 

    }); 

} 

    } 

    var id; 
    $(window).resize(function() { 
     clearTimeout(id); 
     id = setTimeout(doneResizing, 0); 
    }); 

    doneResizing(); 

}); 

Answer 1

您發佈的JS你在頁面中嵌入但它也看起來你已經包括main.js其中有一些相同的功能你嵌入的JS。我敢打賭，這與你的問題有關，但我無法自己測試。