2013-09-26 205 views
0

我有一个移动切换菜单。我需要的是 - 当用户点击菜单项时,我需要切换菜单关闭。点击关闭切换菜单

的jQuery:

$(".nav-button").click(function() { 
    $(".nav-button,.primary-nav").toggleClass("open"); 
}); 

HTML:

<button class="nav-button">Toggle Navigation</button> 
<nav id="mobile-nav"> 
    <ul class="primary-nav"> 
     <li class="current"><a class="scroll-link" href="#home">text</a></li> 
     <li><a class="scroll-link" href="#tab2">text</a></li> 
     <li><a class="scroll-link" href="#tab3">text</a></li> 
     <li><a class="scroll-link" href="#tab4">{text</a></li> 
     <li><a class="scroll-link" href="#tab5">{text</a></li> 
     <li><a class="scroll-link" href="#tab6">{text</a></li> 
    </ul> 
</nav> 

任何帮助将不胜感激,谢谢

UPDATE

感谢所有的答案,但没有他们实现了我想要的,我知道我的杉木这个问题有点垃圾!

主要的原因是该网站i`am做的是视差滚动,所以我想在切换菜单时关闭菜单项被点击,使用户可以看到的,而不是看到一个静态菜单

视差效果

我想出了当用户点击菜单项

问题是菜单当我点击切换按钮不会再去打开菜单项已被点击后关闭切换菜单解决方案

有没有一种方法来默认回到原来的公开课,一旦菜单项被点击和菜单哈关门了

$(".nav-button").click(function() { 
    $(".nav-button,.primary-nav").toggleClass("open"); 
}); 

$(".scroll-link").click(function() 
    $(".nav-button,.primary-nav").toggleClass("close"); 
}); 
+2

有啥问题? – seanxe

+0

请再读一遍您自己的问题。 –

+0

'$('。scroll-link')。click(function(){$('。nav-button')。removeClass('open')});' – Albzi

回答

1

我不明白你需要究竟是什么,但试试这个:

$(".nav-button").click(function() { 
    $("#mobile-nav").toggle(); 
}); 

$(".scroll-link").click(function() { 
    $("#mobile-nav").hide(); 
}); 
+0

谢谢,但这几乎在那里,这个代码完全隐藏菜单,我只需要切换菜单关闭,当用户点击菜单项,然后当导航按钮切换点击菜单再次出现。 –

0

尝试用.slideToggle()

$("button.nav-button").click(function() { 
    $("nav#mobile-nav").slideToggle("fast"); 
}); 

$("ul.primary-nav li a").click(function() { 
    $("nav#mobile-nav").slideUp("fast"); 
}); 

jsFiddle

1

[进入链接这里描述] [1]这可能对你来说有点晚,但我只是在寻找答案使用相同的移动菜单来回答相同的问题,这是我用来让事情正常工作的原因。

$(".nav-button, ul.primary-nav li a").click(function() { 
$(".primary-nav").toggleClass("open"); 
}); 

http://jsfiddle.net/rcdtest/HDQNs/