나는 내가 만든 두 개의 스크립트가 있습니다. 하나는 데스크탑 다중 레벨 드롭 다운 탐색을위한 것이며, 두 번째는 반응이 빠른 경우를위한 것입니다. 내가보기 싫은이 스크립트를 단순화/압축하는 방법이 있습니까?이 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가 포함 된 요소를지나 슬라이드 다운되지 않습니다.
함께 할 수있는 HTML 마크 업을 제공 할 수 있습니까? 많은 jquery 패턴은 마크 업에 크게 의존합니다. 단순화하는 것은 JS의 더 깨끗한/더 적은 라인의 기능 일 수는 없습니다. –
나는 그것을 편집 할 수 있도록 제공했다. –