单击时关闭切换菜单答案

【问题标题】：Close toggle menu on click单击时关闭切换菜单
【发布时间】：2013-09-26 09:35:52
【问题描述】：

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

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>

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

更新

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

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

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

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

有没有办法在单击菜单项并且菜单关闭后默认回到原来的打开类

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

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

【问题讨论】：

那么问题是什么？
请再次阅读您自己的问题。
$('.scroll-link').click(function(){$('.nav-button').removeClass('open')});
就像我说的 ;) 当用户单击菜单项时，我需要关闭切换菜单。谢谢李

标签： jquery html toggle

【解决方案1】：

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

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

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

【讨论】：

谢谢，但这几乎就在那里，这段代码完全隐藏了菜单我只需要在用户单击菜单项时关闭切换菜单，然后单击导航按钮切换菜单再次出现.

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

试试.slideToggle()：

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

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

jsFiddle

【讨论】：

【解决方案4】：

我假设您使用带有 Jquery 的 Bootstrap。在这种情况下，您需要将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>

【讨论】：