토글()을 사용할 때 버블 링을 올바르게 방지하는 방법은 무엇입니까?

Question

768px 이상이면 페이지로드시 목록을 표시하려고하지만 적은 경우 숨기고 제목 클릭시 표시하도록 설정하려고합니다.

창 크기를 조정 한 후에는 정상적으로 작동하지만 왜 작동하지 않는 이유는 무엇입니까? 어떤 충고?

제대로 버블 링을 처리해야합니까?

HTML :

<nav> 
    <h3 class="nav__title">first</h3> 
    <div class="links"> 
     <ul> 
      <li><a href="#">first one</a></li> 
      <li><a href="#">first two</a></li> 
      <li><a href="#">first three</a></li> 
     </ul> 
    </div> 
</nav> 
<nav> 
    <h3 class="nav__title">second</h3> 
    <div class="links"> 
     <ul> 
      <li><a href="#">second one</a></li> 
      <li><a href="#">second two</a></li> 
      <li><a href="#">second three</a></li> 
     </ul> 
    </div> 
</nav> 

JS :

:

jsfiddle

Answer 1

나는 이것이 당신이 원하는 생각

(function() { 

    function footerLinks() { 
     if ($(window).width() < 768) { 
      $(".links").hide(); 
      $(".nav__title").on("click", function (e) { 
       e.preventDefault(); 
       $(this).next(".links").toggle("fast"); 
      }); 
     } else { 
      $(".links").show(); 
     } 
    } 

    footerLinks(); 

    $(window).resize(function() { 
     footerLinks(); 
    }); 

}()); 

, 당신은 이벤트 핸들러 창 크기를 조정 한 모든 시간을 추가했다

(function() { 

    $(".nav__title").on("click", function (e) { 

       e.preventDefault(); 

       // Drop out of function if window is big enough 
       if($(window).width() >= 768){ return; } 

       $(this).next(".links").toggle("fast"); 
      }); 

    function footerLinks() { 

     if ($(window).width() < 768) {   

      $(".links").hide(); 

     } else { 
      $(".links").show(); 
     }    
    } 

    footerLinks(); 

    $(window).resize(function() { 
     footerLinks(); 
    }); 

}()); 

http://jsfiddle.net/E64j4/6/