1

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

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

4 回答 4

3

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

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

$(".scroll-link").click(function () {
    $("#mobile-nav").hide();
});
于 2013-09-26T10:08:52.490 回答
1

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

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

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

于 2013-10-24T03:28:25.557 回答
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

于 2013-09-26T10:11:12.283 回答
0

我假设您将 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>
于 2019-07-05T15:50:59.183 回答