Question

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

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

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

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

我希望脚本仅在窗口大小为<900时起作用，但始终起作用，因此，当菜单按钮隐藏导航栏时，它也将以完整大小显示。

Answer 1

所以，让我们了解一下代码中正在发生的事情...

当触发$(".menu").click(...)时，它会触发$("nav").slideToggle(500);，在其最后一个动作上使用slide toggle方法将在nav元素上添加一个内联css属性，它将为{{1} }，如果display: block;被隐藏，或者nav，如果显示display: none。

然后，当您打开和关闭移动菜单并重新缩放窗口宽度超过900像素时，内嵌nav仍位于display: none上，因此由于内嵌CSS位于效果。

解决方案是：

您可以采取的解决方法是，通过使用nav并设置{{，如果窗口宽于900像素，则“强制” CSS将display:block应用于nav 1}}规则。

所以：

@media

这是CSS解决方案，CSS和Javascript当然有很多不同的方法来实现。但是我相信这很简单。

!important

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

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

在移动尺寸中使用菜单按钮后，导航栏消失（在全尺寸窗口中）

1 个答案: