<script>
$(function () {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$('#pull').click(function (e) {
e.preventDefault();
menu.slideToggle();
});
$('.link').click(function (e) {
e.preventDefault();
menu.slideToggle('1200');
});
$(window).resize(function () {
var w = $(window).width();
if (w < 600 && menu.is(':hidden')) {
menu.removeAttr('style');
enter code here
}
});
});
</script>
<nav class="clearfix">
<ul class="clearfix">
<li><a href="#home" class="link">Home</a></li>
<li><a href="#about" class="link">How-to</a></li>
<li><a href="#work" class="link">Icons</a></li>
<li><a href="#contact" class="link">Design</a></li>
</ul>
<a href="#" id="pull"><img src="images/logo.png"/></a>
</nav>
我从教程中在线找到了这段代码,我对其进行了一些调整,使其成为我希望导航执行的操作。我在上下切换此菜单时遇到了问题。我希望它位于我单击 #pull id 的位置,它会向下切换并向我显示链接。然后,当我点击一个链接时,我希望它切换回来并隐藏链接,但我只希望它在导航的响应方面这样做,而不是在它的正常 View 中。它会切换是否响应。请帮助我!
这是文件的链接 http://www.mediafire.com/download/cz1q3rg3fqm5pxh/Demo-Files.7z
最佳答案
响应式触发两者
var menu = $('nav ul'), plink = $('#pull, .link'), go;
function acdc() {
var ww = $(window).width();
if (ww>600 && go) {//on desktop
if (menu.is(':hidden')) { menu.removeAttr('style'); }
plink.unbind();
go=false;
} else if (ww<600 && !go) {//on small screen
plink.on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
go=true;
}
}
acdc();
$(window).resize(function () { acdc(); });
做了一个 fiddle :http://jsfiddle.net/filever10/Lt9V3/
关于jquery - 上下滑动导航 JQuery 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20670716/