$ (window) .resize 내의 함수 문제 - jQuery 사용

Question

간단한 기능을 사용하여 콘텐츠를 숨기거나 표시하고 싶습니다. 휴대 기기에서만입니다.
함수 자체는 매우 간단합니다. 나는 여기이 코드를 사용 :

$('.toggleMobile').click(function() { 
     var hideableContent = $(this).parent().find('.hideable'); 
     hideableContent.slideToggle('medium'); 
    }); 

그래서 ... 아무것도 공상, 나는 알고있다.

브라우저보기 영역을 감지하려고하면 더 복잡해집니다.
나는 (당신은 아마 그것을 개선 할 수있는 방법을 찾을 것입니다) 나는 다음과 같은 라인을 사용하여 그 처리했다 생각 : 뷰포트 인 경우에만

function whatMedia() { 

     var viewport = $(window).width(); 
     var mediaType; 

     if (viewport < 767) 
      mediaType = 'mobile'; 
     else if ((viewport >= 767) && (viewport < 991)) 
      mediaType = 'tablet'; 
     else 
      mediaType = 'desktop'; 

     return mediaType; 
    } 

지금 난 그냥 트리거됩니다 기능을 필요 mobile (아마도 여기에 문제가 있습니까?) :

function toggleMobile(mediaType) { 

     if (mediaType === 'mobile') { 
      $('.toggleMobile').click(function() { 
       var hideableContent = $(this).parent().find('.hideable'); 
       hideableContent.slideToggle('medium'); 
      }); 
     } 
    } 

페이지가 처음로드 될 때 뷰포트를 확인하는 데 아무런 문제가 없습니다. 난 그냥이 (코드의 아주 간단한 비트)를 사용 : 지금까지

// Check media type and activate accordingly 
    var mT = whatMedia(); 
    toggleMobile(mT); 

너무 좋아합니다. 이제 재미있는 부분이 있습니다.
사용자가 브라우저 창 크기를 조정하고 이에 따라 toggleMobile() 기능을 활성화/비활성화했는지 감지 할 수 있기를 원합니다..

나는이 작업을 수행 할 수 있습니다 :

당신은 아마 이미 아시다시피

$(window).resize(function() { 
     var mT = whatMedia(); 
     toggleMobile(mT); 
    } 

이 $(window).resize 일이 웹킷을하고 다른 브라우저는 약간 미친 가서 한 사용자가 창의 크기를 조절하는 것처럼 기능을 반복합니다.
귀하의 의견에 따라 좋거나 나쁨입니다.
나는 개인적으로 이런 일이하고 싶지 않아, 그래서 내가 this function i found on the forums를 사용

내 resize 이벤트는 다음과 같습니다

var waitForFinalEvent = (function() { 

     var timers = {}; 

     return function (callback, ms, uniqueId) { 
      if (!uniqueId) { 
       uniqueId = "Don't call this twice without a uniqueId"; 
     } 
      if (timers[uniqueId]) { 
       clearTimeout (timers[uniqueId]); 
      } 
      timers[uniqueId] = setTimeout(callback, ms); 
     } 

    })(); 

:

$(window).resize(function() { 
     waitForFinalEvent(function() { 
      var mT = whatMedia(); 
      toggleMobile(mT); 
     }, 500, '1');   
    } 

이 확실히 크기 조정에서 브라우저 윈도우의 계산을 지연하지 하지만 그 안에 기능을 작동시킬 수 없습니다.
나는 문제가
목 함수는 두 번 이상 트리거됩니다, 뷰포트는 desktop 또는 tablet로 인식하는 경우에도 :(무엇인지 모른다. togglemobile 기능에서

Answer 1

, 당신은 단지 클릭을 등록 당신이 그것을 트리거 할 경우, 이벤트하지만 아무것도, 당신은

$('.toggleMobile').click(function() { 
     var hideableContent = $(this).parent().find('.hideable'); 
     hideableContent.slideToggle('medium'); 
    }).trigger('click'); 

을 할 수있는이 대안으로 즉시 대신 요소를 숨길 수, 클릭 이벤트를 트리거하고 코드를 실행하는 것입니다.

ED를 IT : 내 대답을 조금만 수정하겠습니다.

이

$('.toggleMobile').click(function() { 
     if(whatMedia() === "mobile") { 
      var hideableContent = $(this).parent().find('.hideable'); 
      hideableContent.slideToggle('medium'); 
     } 
    }); 

는 다음 toggleMobile(mt); 기능에 우리가 지금 내용을 숨기 크기가 모바일 미디어

function toggleMobile(mediaType) { 

    if (mediaType === 'mobile') { 
     var hideableContent = $(".toggleMobile").parent().find('.hideable'); 
     hideableContent.slideToggle('medium'); 
    } 
} 

이것이까지가는 경우 : 먼저 우리는 slideToggle 내용 중에있는 요소에 대한 클릭 이벤트를 등록 내가 이해한다면, 네가 원하는 걸?

이것이 아마도 @ sje397이 의미하는 것임을 알았습니다.