Question

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

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");
});

Answer 1

我完全不明白你的需要，但试试这个：

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

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

Answer 2

[在此处输入链接说明] [1]这对您来说可能有点晚了，但我只是使用相同的移动菜单搜索同一问题的答案，这就是我过去常常工作的原因。

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

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

Answer 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

Answer 4

我假定您将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>

单击时关闭切换菜单

4 个答案: