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

关于使用有效方法调整窗口大小的任何建议？我正在做一个响应式导航栏。当小于480px时，通过切换导航以最小化-显示设置为隐藏。如果随后将屏幕扩大到大于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;

最佳答案

您对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的更多信息

关于jquery - 使用窗口调整大小的响应式导航栏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45040338/