导航栏消失(在全尺寸窗口中)使用移动尺寸的菜单按钮后

我一直在关注有关导航栏的教程，一切都很好，除了当我使窗口变小并尝试菜单按钮并将窗口重新缩放到正常大小时，一切都消失了。

我尝试在 JavaScript 中添加一个 if 语句，但这并不能解决问题。

https://codepen.io/diegopiscoya/pen/yZJWBy

<script type="text/javascript">
$(document).ready(function(){
  $(".menu").click(function(){
    $("nav").slideToggle(500);
  })
})
</script>

我希望脚本仅在窗口大小<900时才起作用，但它始终有效，因此当菜单按钮隐藏导航栏时，它也以全尺寸执行。

那么，让我们了解代码上发生了什么...

当触发$(".menu").click(...)时，它会触发$("nav").slideToggle(500);，滑动切换方法在其最终操作上将在nav元素上添加内联 css 属性，如果nav被隐藏，它将display: block;，如果显示nav，它将display: none。

然后，当您打开和关闭移动菜单并将窗口重新缩放到 900px 以上时，内联display: none仍在nav 上，因此它不会显示，因为内联 CSS 已生效。

解决方案是：

您可以做的解决方法是，如果窗口宽度超过 900px，则"强制"CSS 将display:block应用于您的nav，方法是使用@media并设置!important规则。

所以：

@media(min-width: 901px) {
    nav#navegacion {
      display: block !important;
    }
}

这是一个CSS解决方案，当然CSS和Javascript有许多不同的方法可以做到这一点。但我认为这是一个简单的问题。

$(document).ready(function(){
            $(".menu").click(function(){
                $("nav").slideToggle(500);
            })
        })

body{
    margin: 0px;
    padding: 0px;
    font-family: "Bree serif", serif;
}
#navegacion{
    width: 100%;
    padding: 0 50px;
    box-sizing: border-box;
}
.logo{
    margin: 0;
    padding: 15px 20px;
    float: left;
}
#nav-list{
    padding: 0;
    margin: 0;
    float: right;
}
#nav-list li{
    list-style: none;
    display: inline-block;
    padding: 20px 30px;
    transition: .5s;
}
#nav-list li a{
    color: black;
    text-decoration: none;
}
.nav_li:hover{
    background: rgba(0, 0, 0, 0.089);   
}
.resp-menu{
    width: 100%;
    background:#fff;
    padding: 10px 30px;
    box-sizing: border-box;
    display: none;
}
.resp-menu a{
    margin: 0;
    padding: 3px 0;
    float: left;
}
.resp-menu h4{
    margin: 0;
    padding: 5px 10px;
    color: #fff;
    float: right;
    background: yellow;
    text-transform: uppercase;
    cursor: pointer;
}
@media(max-width: 900px)
{
    #navegacion{
        display: none;
        padding: 0;
    }
    .resp-menu{
        display: block;
    }
    .logo{
        display: none;
        float: none;
    }
    #nav-list{
        float: none;
        display: block;
    }
    #nav-list li{
        display: block;
        color: black;
        text-align: center;
        padding: 15px 20px;
        border-bottom: 1px solid rgba(12, 8, 8, 0.1);
    }
    .resp-menu a{
        display: block;
    }
}
@media(min-width: 901px) {
    nav#navegacion {
      display: block !important;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, 
    user-scalable=no">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>document</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet"> 
</head>
<body>
    <nav id="navegacion">
        <a href="#"class="logo"><img src="wilphar_logo2.png" width="70"></a>
        <ul id="nav-list">
            <li class="nav_li"><a href="#">Inicio</a></li>
            <li class="nav_li"><a href="#">Nosotros</a></li>
            <li class="nav_li"><a href="#">Productos</a></li>
            <li class="nav_li"><a href="#">Contacto</a></li>
        </ul>
        <div style="clear: both"></div>
    </nav>
    <div class="resp-menu">
        <a href="#"class="logo"><img src="wilphar_logo2.png" width="70"></a>
        <h4 class="menu">menu</h4>
        <div style="clear: both"></div>
    </div>
</body>
</html>

相关内容

最新更新

热门标签：