Question

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

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

以下代码段与您的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可能有所帮助。

响应导航Javascript

1 个答案:

更好地使用CSS media query