jQuery 单击时关闭切换菜单

Close toggle menu on click

提问by Lee Herrod

I have a toggle menu for mobile. What I need is - when a user clicks on a menu item I need the toggle menu to close.

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

jQuery:

jQuery：

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

HTML:

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>

Any help would be greatly appreciated, thanks

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

UPDATE

更新

Thanks for all the answers, but none of them achieved what i want, i know my first question was a little rubbish !

感谢所有的答案，但他们都没有达到我想要的，我知道我的第一个问题有点垃圾！

the main reason is the site i`am doing is a parallax scroller , so i want the toggle menu to close when a menu item is clicked so the user can see the parallax effect instead of seeing a static menu

主要原因是我正在做的网站是一个视差滚动条，所以我希望在单击菜单项时关闭切换菜单，以便用户可以看到视差效果而不是看到静态菜单

I have come up with a solution that closes the toggle menu when a user clicks on a menu item

我想出了一个解决方案，当用户单击菜单项时关闭切换菜单

the problem is the menu will then not open when i click the toggle button after the menu item has been clicked

问题是当我在单击菜单项后单击切换按钮时，菜单将无法打开

is there a way to default back to the original open class once the menu item has been clicked and the menu has closed

单击菜单项并关闭菜单后，是否有办法默认返回原始打开类

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

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

回答by Giorgi BaneTishvili

I don't understand what you need exactly, but try this one:

我不明白你到底需要什么，但试试这个：

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

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

回答by HAR

[enter link description here][1]This may be a little late for you, but I was just searching for the answer to the same question using the same mobile menu, and this is what I used to get things working correctly.

[在此处输入链接描述][1]这对您来说可能有点晚了，但我只是在使用相同的移动菜单搜索同一问题的答案，这就是我用来使事情正常工作的方法。

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

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

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

回答by ASSILI Taher

I assume that you use Bootstrap with Jquery. In this case, you need to add data-toggle="collapse" data-target="#mobile-nav"to your link. Your code will be similar to this:

我假设您将 Bootstrap 与 Jquery 一起使用。在这种情况下，您需要添加data-toggle="collapse" data-target="#mobile-nav"到您的链接。您的代码将类似于：

<button class="nav-button" data-toggle="collapse"
data-target="#mobile-nav">Toggle Navigation</button>

<nav id="mobile-nav">
    <ul class="primary-nav">
        <li class="current">
          <a class="scroll-link" href="#home"
          data-toggle="collapse" data-target="#mobile-nav">text</a>
        </li>

        <li>
          <a class="scroll-link" href="#tab2"
          data-toggle="collapse" data-target="#mobile-nav">text</a>
        </li>

        <li>
          <a class="scroll-link" href="#tab3"
          data-toggle="collapse" data-target="#mobile-nav">text</a>
        </li>

        <li>
          <a class="scroll-link" href="#tab4"
          data-toggle="collapse" data-target="#mobile-nav">{text</a>
        </li>

        <li>
          <a class="scroll-link" href="#tab5"
          data-toggle="collapse" data-target="#mobile-nav">{text</a>
        </li>

        <li>
          <a class="scroll-link" href="#tab6"
          data-toggle="collapse" data-target="#mobile-nav">{text</a>
        </li>
    </ul>
</nav>

回答by Mustapha Aoussar

Try with .slideToggle():

尝试使用.slideToggle()：

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

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

jsFiddle

js小提琴