响应式移动和桌面导航jQuery（两个样式表）

Question

我正在构建一个响应式菜单，但我无法解决一个问题。问题是jQuery ...当处于移动模式（> 600px）时，菜单可以正常滑动，但是当我将其切换回来使其隐藏时，然后当我为cssdesktop视图调整其大小（＆lt; 600px）时，则除非您刷新页面，否则菜单不会显示。 请说明有两种样式表而不是一种样式。

由于

＆＃13;

＆＃13;

jQuery(document).ready(function() {
    
    jQuery('.menubutton').click(function() {
        
        jQuery('.nav-menu').slideToggle(400, function() {
            jQuery(this).toggleClass("nav-expanded")
        });
        
    });
    
});

＆＃13;

 /* cssdesktop.css */

@charset "utf-8";
/* CSS Document */

body {
    position: absolute;
    overflow-y: scroll;
    padding: 0;
    margin: 0;
    font-family: "Times New Roman", Times, serif;
    min-width: 100%
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* scrollbar*/

::-webkit-scrollbar {
    width: 0.8em;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

::-webkit-scrollbar-corner {
    background: rgb(255, 0, 0); 
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0.4);
}

::-webkit-scrollbar-thumb:hover{
    background: #680000;
}

::-webkit-scrollbar-thumb:active{
    background: rgba(104, 0, 0, 0.67);
}

/* Navigation*/


/* menu button */
.menubutton {
    display: none;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 1.5vw;
    color: white;
    border-bottom: 4px black #680000;
    padding: 5px;
    background-color: #680000;
}

.menubutton:hover {
    background-color: #a30000;
}

.menubutton:active {
    background-color: #ff0000;
}

.menu_logo {
    max-width: 60px;
    top: 5;
    left: 5;
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    position: fixed;
    z-index: 2;
}

.nav-menu {
    display: block;
}

.nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    position: relative;
    background-color: gainsboro;
}

.nav-menu ul li {
    display: inline-block;
}

.nav-menu ul li:hover {
    background-color: #a30000;
    border-top: 3px #fff solid;
    border-bottom: 3px #fff solid;
    border-radius: 5px;
}

.nav-menu ul li:active {
    border-top: 3px #fff solid;
    border-bottom: 3px #fff solid;
    background-color: #680000;
}

.currentnav {
    border-top: 3px #fff solid;
    border-bottom: 3px #fff solid;
    background-color: #ff0000;
    border-radius: 5px;
}

.nav-menu ul li a {
    display: block;
    padding: 17px;
    color: black;
    text-decoration: none;
    font-size: 20pt;
    font-weight: bold;
}

/* cssphone.css */

@charset "utf-8";
/* CSS Document */

/* scrollbar*/

::-webkit-scrollbar {
    width: 0.8em;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

::-webkit-scrollbar-corner {
    background: rgb(255, 0, 0); 
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0.4);
}

::-webkit-scrollbar-thumb:hover{
    background: #680000;
}

::-webkit-scrollbar-thumb:active{
    background: rgba(104, 0, 0, 0.67);
}

/* Navigation*/



.menubutton {
    display: block;
    position: relative;
    text-align: center;
    padding: 15px;
    font-size: 20pt;
    font-size: 5vw;
    cursor: pointer;
    border-radius: 25px;
}

.nav-menu {
    display: none;
}

.nav-menu ul li {
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    border-bottom: 1px black dashed;
}

.currentnav {
    border-bottom: 3px #fff dashed;
    border-top: none;
}

.nav-menu ul li a {
    box-sizing: border-box;
    font-size: 20pt;
    font-size: 6vw;
}

.nav-menu ul li:hover {
    background-color: #a30000;
    border-top: none;
    border-bottom: none;
    border-bottom: 1px #fff dashed;
}

.nav-menu ul li:active {
    border-top: none;
    border-bottom: none;
    background-color: #680000;
}

＆＃13;

<!DOCTYPE html>
<html class="html" lang="en">


<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8">
  <meta name="description" content="none">
  <meta name="keywords" content="none">
  <meta name="author" content="T.S.">
  <title>Title</title>
  <link rel="stylesheet" type="text/css" href="cssdesktop.css">
  <link rel="stylesheet" type="text/css" media="only screen and (min-width: 1px) and (max-width: 599px)" href="cssphone.css">

  <script type="text/javascript" src="jsfiles/jquery-2.1.4.min.js"></script>
  <script type="text/javascript" src="jsfiles/script.js"></script>
</head>

<body class="homepage" link="blue" vlink="orange" alink="yellow">
 
  <div class="menubutton">&darr; MENU &darr;</div>
  <nav class="nav-menu">
    <ul>
	  <li class="currentnav"><a href="index.html">Home</a></li><li>
      <a href="One.html">One</a></li><li>
	  <a href="Two.html">Two</a></li><li>
      <a href="Archive.html">Archive</a></li><li>
	  <a href="F.A.Q..html">F.A.Q.</a></li><li>
	  <a href="Contact.html">Contact</a></li>
	</ul>
  </nav>
    
	  
	  <p> hello, and thanks for helping </p>
    
</body>
</html>

＆＃13;

＆＃13;

＆＃13;

Answer 1

当您调用display: none时，jQuery会将.slideToggle()添加到您的内联样式，并且内联样式始终会覆盖您的样式表。

jQuery(document).ready(function() {

    jQuery('.menubutton').click(function() {

        jQuery('.nav-menu').slideToggle(400, function() {
            jQuery(this).toggleClass("nav-expanded")

            /* I added this here */
            if(!jQuery(this).hasClass('nav-expanded')) {
                jQuery(this).css('display', '')
            }

        });
    });
});