响应式导航 Javascript

Question

我正在尝试制作响应式导航。我正在使用一些 jquery，但我不太了解 javascript。我希望在窗口具有一定宽度（例如 1050 像素）时进行切换，这是脚本

function adaptMenu() {

    /*  toggle menu on resize */

    $('nav').each(function() {
        var $width = $(this).css('max-width');
        $width = $width.replace('px', '');
        if ($(this).parent().width() < $width * 1.05) {
            $(this).children('.nav-main-list').hide(0);
            $(this).children('.nav-toggled').show(0);
        } else {
            $(this).children('.nav-main-list').show(0);
            $(this).children('.nav-toggled').hide(0);
        }
    });

}

Answer 1

您可以通过修复给定的 javascript 来解决这个问题，但是 javascript 处理响应式设计的效率很低。 CSS 引擎是用 C++ 编写的，运行速度更快，并且在调整浏览器大小时会自动运行。

更好地使用CSS media query

以下 sn-p 与您的 javascript 相同，但使用纯 CSS。

<style>
@media (max-width: 1049px) {
  nav .nav-main-list {
    display: none;  /* hide .nav-main-list when browser windows width < 1050px */
  }
  nav .nav-toggle {
    display: initial;  /* show */
  }
}
@media (min-width: 1050px) {
  nav .nav-main-list {
    display: initial;  /* show .nav-main-list when browser windows width > 1050px */
  }
  nav .nav-toggle {
    display: none;     /* hide */ 
  }
}    
</style>

编辑： 正如@Roko 评论的那样，媒体查询在 IE8 及更早版本中不起作用。如果您需要支持该浏览器，post 可能会有所帮助。