用于移动集成的 Jquery 菜单 - 从移动分辨率移动到桌面无法正常工作

Question

我正在尝试使用以下代码(见下文)合并用于移动设备的 jquery 菜单。我包含了标题和菜单的 html、脚本和 css。 我遇到的问题是，如果移动菜单被激活，然后我将浏览器窗口放大到桌面大小(分辨率)，菜单的类选择器具有 display:none 属性。当分辨率高于 900px 时，我无法弄清楚如何删除该属性。

<div id="header">
        <div class="logoandnav">
            <a id="logo" href="http://localhost/wordpress2"><img src="#></a>
            <ul class="menu">
                <li><a href="http://localhost/wordpress2">Portfolio</a></li>
                <li><a href="http://localhost/wordpress2/?page_id=775">Services</a></li>
                <li><a href="http://localhost/wordpress2/?page_id=736">About</a></li>
                  </ul>
        </div>
    <script type="text/javascript">
    jQuery(document).ready(function($){
    /* prepend menu icon */
    $('#header').prepend('<div id="menu-icon" data-toggle="collapse">Menu</div>');
    /* toggle nav */
    $("#menu-icon").on("click", function(){
        $(".menu").slideToggle();
        $ (this) .toggleClass("active");
         });
          });

        </script>

#header{
background: rgba(255,255,255,0.9);
border-bottom: 1px solid rgba(0,0,0,0.1);
padding: 20px 0 10px 0;
position: fixed;
top: 0;
width: 90%;
z-index: 991;
height:80px;
/*box-shadow:1px 1px 3px rgba(255,255,255,0.5);*/
box-shadow: 0 0 30px rgba(0,0,0,.10);
-webkit-box-shadow: 0 0 30px rgba(0,0,0,.10);
-moz-box-shadow: 0 0 30px rgba(0,0,0,.10);
display:block;
}
#logo{
float:left;
text-align:center;
margin-top:0px !important;
margin-bottom:0px !important;
}
.logoandnav{
max-width:1200px;
margin-left:50px;
margin-top:10px !important;
height:60px;
}
ul li a:hover{border-bottom:3px solid #507abf;color:#507abf;}
.menu{float:right;line-height:50px;}
ul.menu li,.menu{display:inline;}
#menu-icon{display:none;}

ul li{
display:inline;
list-style:none !important;
padding-left:25px !important;
font-family: 'Archivo Narrow', Arial,sans-serif;
font-weight:800;
font-size:22px !important;
}

@media only screen and (max-width: 767px){


ul li{font-size:18px !important;}

#menu-icon{
color:black;
width:42px;
height:30px;
padding:12px 20px 0px 20px;
cursor:pointer;
display:block;
float:right;
margin-top:30px;
font-size:14px;
text-transform:uppercase;
background:url('http://localhost/wordpress2/wp-content/uploads/2013/12/menu_button.png') no-repeat left center;
}

#menu-icon:hover{color:#33B779;}
.menu{display:none;}
.menu{
clear:both;
position:absolute;
top:70px;
right:0px;
width:140px;
z-index:1000;
padding:5px;
background-color:white;
border:1px solid grey;
line-height:30px;
}

Answer 1

将 @media only screen and (max-width: 767px) 更改为 @media screen and (max-width: 767px)