Jquery 激活/停用移动菜单并调整其大小后，桌面菜单将消失

该网站是一个响应性网站，这是您复制问题的方式：

以桌面宽度加载网站（导航元素加载精细）

调整为平板电脑或手机大小（菜单转换为带有三条图标的手机样式下拉菜单）

打开和关闭移动导航菜单（设置为显示：无）

现在，当您调整到桌面宽度时，导航栏仍设置为“显示：无”

我知道我可以通过创建两个菜单栏并对它们应用单独的ID来解决这个问题，但我想看看是否有人有一个解决方案，允许我只维护一个菜单

HTML：

<nav>
    <ul id="menu">
        <li><a href="#">Who We Are</a></li>
        <li id="information">
            <a href="#">Why We're Different</a>
        </li>
        <li id="services">
            <a>GPA Services</a>
            <ul id="servicesmenu">
                <li><a href="#">HealthWatch</a></li>
                <li><a href="#">ClaimWatch</a></li>
                <li><a href="#">Administrative Services</a></li>
                <li><a href="#">Marketing and Sales</a></li>
                <li><a href="#">Specialty Services</a></li>
            </ul>
        </li>
        <li id="login"><a>Login</a>
            <ul id="loginmenu">
                <li><a href="#">Employers</a></li>
                <li><a href="#">Members</a></li>
                <li><a href="#">Brokers</a></li>
                <li><a href="#">Providers</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Contact Us</a>
        </li>
    </ul>
</nav>

或者，您可以在此处查看页面的测试版本（注意：页面/图像尚未针对加载时间进行优化，因此一些图像的大小使加载时间有点长）：

---

单击按钮时，它正在更改保存菜单的

ul

的位置。再次单击按钮隐藏菜单时，它会将所有内容更改回原来的位置，但会添加一个

显示：无

。您需要从JS文件中删除该位置

由于您正在使用一个自定义函数

滑动切换

，其中包括大多数单独的操作，因此很难删除。您可以重新创建自己的函数并调用它，或者只调用所有单独的操作。您也可以让它发生，然后将其重置为

显示：块；

$( document ).ready(function() {
  $("#menu-icon").click(function() {
        $("#menu").slideToggle().show(); 
  });
  ... JS Continues ...

编辑：

您可能在计时方面有问题。您希望最后应用

.show（）

，并覆盖作为.slideToggle（）一部分的

.hide（）

。如果将其作为完成函数放置，则在另一个函数完成后才会触发

$( document ).ready(function() {
  $("#menu-icon").click(function() {
        $("#menu").slideToggle(function() {
              $("#menu").show(); 
        });
  });
  ... JS Continues ...

---

尝试将其添加到样式表中：

@media screen and (min-width:1199px) {
       #menu { display:block !important; }
}

示例HTML

<div class="navbar-container">
     <ul class="nav group pull-right">
        <li><a href="#">Home</a></li>
        <li><a href="#">Company</a></li>
        <li><a href="#">Location</a></li>
        <li><a href="#">Activities</a></li>
        <li><a href="#">Tours</a></li>
        <li><a href="#">Administration</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact us</a></li>
     </ul>
     <a href="#" id="pull">Main Menu</a>
</div><!--navbar container-->

风格

#pull {
  display: block;
  width: 80%;
  padding:5px;
  margin:0px auto 0 auto;
  text-decoration:none;
  color:#5a504c;
  background-color:#e7e5e2;
}

---

这是因为一旦你关闭它，它将使#菜单显示：无，然后你使浏览器的大小变大，它被卡住了显示无；使用两个不同的菜单可以更好的解决这个问题，没有头痛是的，我知道它发生的原因，我只是想找到一种方法来解决它。我考虑过让页面重新加载到resize，但这是一种糟糕的web实践。在执行类似操作之前，我只需要两个单独的菜单。如果浏览器大小适合桌面媒体查询，您可以简单地将其设置为显示块。我认为您的桌面css将工作1200px和更高。抱歉，这没有达到预期效果。不过，谢谢！因为你的编辑…这可能有用，但上面的解决方案对我来说更简单。谢谢你的帮助！很高兴能提供帮助。请随意+1任何有用的答案，并给你最终使用的答案打勾。哇！就是这样！现在我看到了，它看起来很明显！哈哈。谢谢你的帮助。这让你不用麻烦了不管发生什么，JS都会覆盖。简单干净，很好。对你来说+1。使用！重要的不是一个好的实践，但在这里它是一个好的解决方案+1

  $(function() {
     var pull = $('#pull');
     menu     = $('.navbar-container ul');
     menuHeight = menu.height();

     $(pull).on('click', function(e) {
         e.preventDefault();
         menu.slideToggle();
      });

     $(window).resize(function(){
       var w = $(window).width();
       if(w > 320 && menu.is(':hidden')) {
           menu.removeAttr('style');
     }
     });
    });

#pull {
  display: block;
  width: 80%;
  padding:5px;
  margin:0px auto 0 auto;
  text-decoration:none;
  color:#5a504c;
  background-color:#e7e5e2;
}