导航栏问题通过调整大小到移动它自动打开我的导航栏答案

【问题标题】：Problem with navbar by resize to mobile it automatic opens my navbar导航栏问题通过调整大小到移动它自动打开我的导航栏
【发布时间】：2020-04-18 22:42:53
【问题描述】：

当我从桌面调整大小到移动设备并单击菜单打开导航栏然后将其关闭，调整回桌面大小然后重新调整回移动设备时，一切正常这是问题开始的地方自动打开我的导航栏。

我正试图找到一种方法来保持它关闭。它只能通过切换菜单按钮手动打开。

谁能帮帮我？

body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
nav{
    width: 100%;
    background: #202c45;
    padding: 0 50px;
    box-sizing: border-box;
}
nav h1{
    margin: 0;
    float: left;
    padding: 15px 20px;
}
nav h1 a{
    color: #fff;
    text-decoration: none;
}
nav ul{
    margin: 0;
    padding: 0;
    float: right;

}

nav ul li{
    list-style: none;
    display: inline-block;
    padding: 20px 30px;
    transition: .5s;
}
nav ul li a{
    color: #fff;
    text-decoration: none;
}
nav ul li:hover{
    background: #f2184f;
}

.responsive-bar{
    width: 100%;
    background: #202c45;
    padding: 10px 30px;
    box-sizing: border-box;
    display: none;
}
.responsive-bar h3{
    margin: 0;
    padding: 3px 0;
    color: #fff;
    float: left;
}

.responsive-bar h3 a{
    color: #fff;
    text-decoration: none;
}

.responsive-bar h4{
    margin: 0;
    padding: 0;
    color: #fff;
    float: right;
    padding: 5px 10px;
    background: #f2184f;
    text-transform: uppercase;
    cursor: pointer;
}

/* mobile responsive */

@media (max-width: 900px)
{
    nav{
        padding: 0;
        display: none;
    }
    .responsive-bar{
        display: block;
    }
    nav h1{
       display: block;
       float: none; 
    }
    nav ul{
        float: none;
    }
    nav ul li{
        display: block;
        text-align: center;
        background: #141e33;
        padding: 15px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }
    h1 .brand{
        display: none;
    }
}

<!DOCTYPE html>
<html>
  <head>
    <title>
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive nav-bar Bar</title>
    <link rel="stylesheet" href="udemymobile.css">
</head>

<body>
  <nav>
      <h1 class="brand"><a href="#">Online Tutorials</a></h1>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About us</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <div style="clear: both"></div>
  </nav>
  <div class="responsive-bar">
    <h3 class="brand"><a href="#">Online Tutorials</a></h3>
    <h4 class="menu">Menu</h4>
    <div style="clear: both"></div>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
    $(".menu").click(function(){
      $("nav").slideToggle(500);
    })
  })

  $(window).resize(function() {
        if ($(this).width() > 900) {
               $("nav").show(); 
        }
});
  </script>
</body>

【问题讨论】：

标签： jquery html css navbar responsive

【解决方案1】：

您在调整大小而不是点击时切换nav.show()，因此当您调整大小时，该功能每次都会运行。如果你把它拿出来

$(window).resize(function() {
        if ($(this).width() > 900) {
               $("nav").show(); 
        }

你的代码还能用吗？

【讨论】：

我的代码仍然可以工作，但如果我把它拿出来，它会给我第二个问题，那就是当我从移动设备调整到桌面时，我的导航栏不见了。
将此添加到您的 css 文件 @media and screen (min-width: 900px) { nav{ display: block; } }
遗憾的是它也没有用。当我将其调整为移动时，我添加了 jq 代码和 css 代码，导航栏仍然自动打开。我删除了 jq 代码，所以只使用 css 代码，当我调整到桌面时，我的导航栏消失了，当我将其调整到移动设备时，它确实可以工作，我的导航栏不会自动打开什么是好的。但是当然，我的桌面还有另一个问题。

【解决方案2】：

答案就在我面前。我重新检查了我的代码，终于看到了我自己的解决方案

  $(window).resize(function() {
    if ($(this).width() < 900) {
           $("nav").hide(); 
    }

});

【讨论】：