移动菜单激活/停用和调整大小后桌面菜单消失答案

【问题标题】：Desktop menu disappears after mobile menu is activated/deactivated and resized移动菜单激活/停用和调整大小后桌面菜单消失
【发布时间】：2014-04-15 05:24:32
【问题描述】：

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

以桌面宽度加载网站（导航元素加载正常）。
调整为平板电脑或手机大小（菜单转换为带有三栏图标的手机式下拉菜单。
打开和关闭移动导航菜单（设置为显示：无）。
现在，当您调整为桌面宽度时，导航栏仍设置为 display: none。

我知道我可以通过创建两个菜单栏并对其应用单独的 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>

jQuery：

$( document ).ready(function() {
  $("#menu-icon").click(function() {
        $("#menu").slideToggle(); 
  });
    $("#services").click(function() {
        $("#loginmenu").slideUp();
        $("#servicesmenu").slideToggle();
    });
    $("#login").click(function() {
        $("#servicesmenu").slideUp();
        $("#loginmenu").slideToggle();
    });
    $('html').click(function() {
        $("#loginmenu").slideUp();
        $("#servicesmenu").slideUp();
    });
    $('#login, #loginmenu, #services, #servicesmenu').click(function(event){
        event.stopPropagation();
    });
});

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

http://test.digital-scorpion.com/gpa/index.php

【问题讨论】：

它是因为一旦你关闭它会使#menu display:none 然后你把浏览器的尺寸变大，它就卡住了 display none;使用 2 个不同的菜单来解决这个问题可能是更好的解决方案，不会让人头疼
是的，我知道它发生的原因，我只是想找出解决方法。我考虑过在调整大小时重新加载页面，但这是不好的网络做法。在做类似的事情之前，我只会有两个单独的菜单。
如果浏览器大小适合您的桌面媒体查询，您可以简单地将其设置为显示块。我认为你的桌面 css 可以工作 1200 像素或更高

标签： jquery html css responsive-design

【解决方案1】：

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

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

【讨论】：

哇！就是这样！现在我看到它，它似乎很明显！哈哈。感谢您的帮助。
这让你不用为 JS 操心，不管怎样都覆盖。简单干净，不错。为你 +1。
使用 !important 不是一个好习惯，但这是一个很好的解决方案 +1

【解决方案2】：

单击按钮时，它会更改保存菜单的ul 的位置。当再次单击它以隐藏菜单时，它会更改所有内容，但会添加一个display:none。您需要从您的 JS 文件中删除它。

由于您使用的是自定义函数slideToggle，其中包含大部分单独的操作，因此很难将其删除。您可以重新创建自己的函数并调用它，或者只调用所有单独的操作。你也可以让它发生，然后将其重置为display:block;

$( 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 ...

【讨论】：

很抱歉，这并没有达到预期的效果。不过还是谢谢！
因为您的编辑...这可能有效，但上述解决方案对我来说更简单一些。不过感谢您的帮助！
很高兴为您提供帮助。随意 +1 任何有效且有用的答案，并为您最终使用的答案打勾。

【解决方案3】：

示例 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-->

jQuery 函数

  $(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;
}

【讨论】：