브라우저 크기 조정 + 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

당신은 당신이 페이지에 포함되지만 main.js는 동일한 기능 등의 일부를 갖고있는 포함 한 것처럼도 보이는 JS 게시 당신이 끼워 넣은 JS. 내 내기는 이것이 당신의 문제와 관련이 있다는 것이지만, 직접 테스트 할 수는 없다.