jquery - 使用窗口调整大小的响应式导航栏

Question

关于使用有效方法调整窗口大小的任何建议？我正在做一个响应式导航栏。当小于 480 像素时，通过切换导航最小化 - 显示设置为隐藏。如果我随后将屏幕增大到大于 480，导航将保持隐藏状态。为了解决这个问题，我添加了一个窗口调整大小功能，只要屏幕大于 480，列表就会回到其初始值。我觉得这可以大大改进并且浪费了很多性能。

<div class = "dropdown">
        <div class = "icon">
            <img src ="menu.png" class = "text" align = "right">
        </div>
        <ul class = "header-li"> 
            <li><a href ="#1">1</a></li>
            <li><a href ="#2">2</a></li>
            <li><a href="#3">3</a></li>
            <li><a href="#4">4</a></li>
        </ul>
    </div>  


$(".icon").click(function(){
    $(".header-li", ".dropdown").slideToggle(); 
});


$(window).on('resize',function(event){
    var windowSize = $(this).width();

    if (windowSize > 480){
        $(".header-li").css('display','');
    }
}); 

Media query max 480px

display icon
list display:none;

Answer 1

您对 window.resize 的使用是正确的，但是，您还需要添加一个 else 条件，以便在窗口缩小后替换样式。

但是，我建议为此使用媒体查询，因为相比之下它效率更高，并且可以使用纯 CSS 完成。

运行下面的代码片段并单击“全屏”，然后调整浏览器窗口的大小以查看正在运行的演示。

/* The default view (in this case, for mobile) */
.header-li {
  background: red;
  width: 50px;
  height: 50px;
}

/* When the window is greater than 480px wide */
@media only screen and (min-width: 480px) {
  .header-li {
    background:green;
  }
}

<div class="header-li"> </div>

了解更多关于 Media Queries 的信息