2012-11-27 3 views
2

나는 내가 만든 두 개의 스크립트가 있습니다. 하나는 데스크탑 다중 레벨 드롭 다운 탐색을위한 것이며, 두 번째는 반응이 빠른 경우를위한 것입니다. 내가보기 싫은이 스크립트를 단순화/압축하는 방법이 있습니까?이 jQuery 드롭 다운 스크립트를 단순화 할 수 있습니까?

내 단순화 된 버전입니다.

<div class="nav"> 
    <div class="mobile-nav">Navigation</div> 
     <ul class="primary"> 
      <li><a href="#link">Link</a></li> 
      <li><a class="has-drop">Link w/ Children <span></span></a> 
      <ul class="drop"> 
       <li><a href="#link">Link</a></li> 
       <li><a href="#link">Link</a></li> 
       <li><a href="#link">Link</a></li> 
       <li><a href="#link">Link</a></li> 
       <li><a href="#link">Link</a></li> 
      </ul> 
      </li> 
      <li><a class="has-drop" href="#link">Link w/ Children <span></span></a> 
      <ul class="drop"> 
       <li><a href="#link">Link</a></li> 
       <li><a href="#link">Link</a></li> 
       <li><a href="#link">Link</a></li> 
       <li><a href="#link">Link</a></li> 
       <li><a href="#link">Link</a></li> 
      </ul> 
      </li> 
      <li><a href="#link">Link</a></li> 
      <li><a href="#link">Link</a></li> 
     </ul> 
     <div class="clear"></div> 
    </div> 
</div> 

지금 데 문제는 window.Resize 기능은 모든 시간을 발사되지 않는 것입니다 : 여기

$(document).ready(function() { 
$('ul.primary li').click(function() { 
    var a = this; 
    if ($('ul', this).is(':visible')) { 
     $('ul', this).slideUp(function() { 
      $(a).removeClass('active') 
     }) 
    } else { 
     $('ul.drop').slideUp(); 
     $('ul.primary li').removeClass('active'); 
     $('ul', this).slideDown(); 
     $(a).addClass('active') 
    } 
}); 
$('body').click(function (a) { 
    if (!$(a.target).is('a')) { 
     $('ul.drop').slideUp(); 
     $('ul.primary li').removeClass('active') 
    } 
}); 
$(function() { 
    $('.mobile-nav').click(function (e) { 
     $('.primary').slideToggle(150, "swing"); 
     e.stopPropagation() 
    }); 
    $(window).resize(function() { 
     $('ul.drop').slideUp(); 
     $('ul.primary li').removeClass('active') 
    }); 
}) 
}); 

는 마크 업입니다. 창 크기를 조정할 때 열린 ul.drop을 모두 닫으려고합니다.

브라우저를 바탕 화면 너비로 다시 크기를 조정할 때 ul.drops가 잘리는 것처럼 보입니다. 새로 고칠 때까지 ull.drops가 포함 된 요소를지나 슬라이드 다운되지 않습니다.

+0

함께 할 수있는 HTML 마크 업을 제공 할 수 있습니까? 많은 jquery 패턴은 마크 업에 크게 의존합니다. 단순화하는 것은 JS의 더 깨끗한/더 적은 라인의 기능 일 수는 없습니다. –

+0

나는 그것을 편집 할 수 있도록 제공했다. –

답변

3

http://dean.edwards.name/packer/은 직접 압축하는 것이 좋습니다.
꽤 자명 한 사용법 :)

+0

고마워, 나는 전에 그것을 사용한 적이 없어! –

관련 문제