我有两个脚本,我已经创建了。一个用于桌面多级下拉导航,第二个用于响应式。有没有办法简化/压缩这个我没有看到的脚本?
这是我的简化版。
$(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')
});
})
});
这是标记:
<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 函数并没有一直触发。我正在寻求在调整窗口大小时关闭所有打开的 ul.drop。
此外,当我的浏览器重新调整为桌面宽度时,我的 ul.drops 似乎被切断,并且在我刷新之前不会滑过包含的元素。