크기 조정시 다른 기능 실행

Question

나는 이것을 사용해 보았지만 어떤 키워드를 사용해야하는지 잘 모르겠다. 그래서 나는 비어있게 될 것이다. 어쨌든, 나는 내 기능과 발사 방식이 비교적 간단하다는 것을 느낀다.

내가 원하는 기능은 다음과 같습니다. ".menu-item-has-children a i"구조로 탐색 옆에 작은 화살표가 있습니다. 모바일 (880px 미만)에서 해당 <i> 요소를 클릭하고 아래의 <ul>을 토글하고 싶습니다. 데스크톱에서는 그렇지 않습니다. 위의 두 가지 뷰포트 크기 (880 미만 및 880 이상) 사이를 전환 할 때까지 제대로 작동합니다. 그런 다음 페이지를 다시로드 할 때까지 원하는 기능이 실행되지 않습니다. 당신이 할 수있는,

jQuery(document.ready(function($) { 
    function mobileNav() { 
     var w = $(window).width(); 

     if (w < 879) { 
      $('.menu-item-has-children a i').click(function(e) { 
       e.preventDefault(); 
       $(this).parents('menu-item-has-children').children('ul').toggle(); 
       $(this).toggleClass('turned'); 
      }); 
     } 
    } 

    mobileNav(); 

    jQuery(window).resize(function($) { 
     mobileNav(); 
    }); 
}); 

Answer 1

임 정확히 확인되지하지만 난 $(this).parents('menu-item-has-children').children('ul').toggle();

FWIW와 라인에 menu-item-has-children의 앞에 더 .이 없기 때문에이 작동하지 않는 이유는 생각 : 내 jQuery를은 다음과 같습니다 domReady에 대한 필요성을 없애고 크기 조정 기능을 제거하는 클릭 핸들러의 델리 게이트 (delegate) 구문을 사용하십시오. 왜냐하면 화면 크기를 조정할 때 실제로 어떤 동작도 실행하지 않기 때문입니다. .menu-item-has-children a i 노드를 클릭했을 때 어떤 일이 발생하는지 신경 써야합니다. 그래서 우리는 클릭 할 때마다 화면 크기를 확인할 수 있습니다.

jQuery(document).on('click', '.menu-item-has-children a i', function(e) { 
     var $ = jQuery; 
     var $this = $(this); 
     e.preventDefault(); 
     if (879 < $(window).width()) { 
      $this.parents('.menu-item-has-children').children('ul').toggle(); 
      $this.toggleClass('turned'); 
     } 
    });