Question

我正在制作一个响应式网页设计，但我用我的jquery遇到了这个问题。每当我尝试在移动大小时打开我的菜单，它只是打开一秒钟，甚至在我点击菜单按钮之前快速关闭。当我将.css（'display'，''）更改为.css（'display'，'500'）菜单有效但问题是，当我关闭移动菜单时，我的完整桌面网站导航菜单没有节目。如何解决此问题，以便我的导航栏可以在移动设备以及桌面和平板电脑视图中使用？

我将手机/平板电脑/ dektop .css文件分开保存，而不是制作@media，如果可能的话，我希望保持这种方式。（如果您对代码有任何疑问，请随时提出，并提前感谢您抽出时间帮助我。）

jQuery(document).ready(function() {
    
    jQuery(".menubutton").click(function() {
        
        jQuery(".nav-menu").slideToggle(400, function() {
            jQuery(this).toggleClass("nav-expanded").css('display', '')
        //the number next to 'display' '' can be turned into 1 but then the menu of desktop doesn't show
        });
        
    });
    
});

@charset "utf-8";

/* cssphone */

.menubutton {
    display: block;
    position: relative;
    background-color: orange;
    text-align: center;
    padding: 15px;
    font-size: 20pt;
    font-size: 6vw;
    cursor: pointer;
}


/* Navigation java*/
.nav-expanded {
    display: block;
}

/* Navigation java end*/

.nav-menu {
    display: none;
}

nav ul {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    position: relative;
    background-color: #680000;
}

nav ul li {
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    border-bottom: 1px black dashed;
}

nav ul li:hover {
    background-color: #ff0000;
}

nav ul li:active {
    border-bottom: 3px #fff dashed;
    background-color: #ff0000;
}

.currentnav {
    border-bottom: 3px #fff dashed;
    background-color: #ff0000;
}

nav ul li a {
    display: block;
    padding: 15px;
    color: white;
    text-decoration: none;
    box-sizing: border-box;
    font-size: 20pt;
    font-size: 6vw;
    font-weight: bold;
}

nav ul li:last-child {
    border-bottom: none;
}

nav ul li:hover > ul {
    display: block;
}

nav ul ul {
    display: block;
    position: relative;
    background-color: #680000;
    width: 100%;
    text-align: left;
    list-style: none;
}

nav ul ul li {
    display: block;
    text-align: center;
}

nav ul ul li:hover {
    color: white;
    background-color: #ff0000;
}

/* css phone ends */


/* css desktop */

@charset "utf-8";

.menubutton {
    display: none;
    width: 100%;
    box-sizing: border-box;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    position: relative;
    background-color: #680000;
}

nav ul li {
    display: inline-block;
}

nav ul li:hover {
    background-color: #ff0000;
}

nav ul li:active {
    border-bottom: 3px #fff solid;
    background-color: #ff0000;
}

.currentnav {
    border-bottom: 3px #fff solid;
    background-color: #ff0000;
}

nav ul li a {
    display: block;
    padding: 15px;
    color: white;
    text-decoration: none;
    font-size: 20pt;
    font-weight: bold;
}

nav ul li:hover > ul {
    display: block;
}

nav ul ul {
    display: none;
    position: absolute;
    background-color: #680000;
    min-width: 150px;
    text-align: left;
    border-top: 0;
    margin: 0 0 0 -2px;
}

nav ul ul li {
    display: block;
    border: 1px solid black;
    text-align: center;
}

nav ul ul li:hover {
    color: white;
    background-color: #ff0000;
}

/* css desktop ends */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYLE html>
<html class="html" lang="en">


<head>
  <meta name="viewport" content="width=device-width, initial-scale=1"
  <meta charset="UTF-8">
  <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">
  <link rel="stylesheet" type="text/css" media="only screen and (min-width: 600px) and (max-width: 960px)" href="csstablet.css">
  <link rel="icon" type="image/png" href="images/logo%2016x16.png" alt="16x16logo">
  <link rel="shortcut icon" type="image/png" href="images/logo%2016x16.png">

  <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="orange" vlink="blue" alink="yellow">
 

  <div class="menubutton">MENU</div>
  <nav class="nav-menu"> 
    <ul>
	  <li class="currentnav"><a href="index.html">Home</a></li><li>
	  <a href="Gamin'_News.html">News</a>
        <ul>
          <li><a href="Latest_Gamin'_News.html">LGN</a></li>
          <li><a href="Games_Coming_Out_requirements.html">Games Coming out/Requirements</a></li>
          <li><a href="Technology_News.html">Technology News</a></li>
        </ul>
      </li><li>
	  <a href="Gameplay.html">Gameplay</a>
        <ul>
          <li><a href="Counter_Strike_Global_Offensive.html">CS</a></li>
          <li><a href="The_Elder_Scrolls_Online_Tamriel_Unlimited.html">TESO</a></li>
          <li><a href="Other_Games.html">Other Games</a></li>
        </ul>
      </li><li>
	  <a href="F.A.Q..html">F.A.Q.</a>
        <ul>
          <li><a href="Cookies.html">Cookies</a></li>  
        </ul>
      </li><li>
	  <a href="About.html">About</a>
        <ul>
          <li><a href="Who_am_I.html">Who am I?</a></li>
          <li><a href="Facebook.html">Facebook</a></li>
          <li><a href="Twitch.html">Twitch</a></li>
          <li><a href="Youtube.html">Youtube</a></li>
        </ul>  
      </li><li>
	  <a href="Contact.html">Contact</a></li>
	</ul>
  </nav>
  </body>
  </html>

Answer 1

我在jsFiddle中重新创建了你的代码：https://jsfiddle.net/k4zL1rap/ 我必须将一些css属性更改为显示块，以便我可以看到导航，但问题出在以下代码中：

.css('display', '')您已经使用类切换显示块，因此额外的显示然后删除显示值，因为您在js中有一个空字符串。此行的末尾也应该有一个分号以供将来参考。

响应式移动导航栏（导航）jquery / javascript

1 个答案: