Question

当我将页面缩小到769px以下时，如何添加菜单图标？

我添加了一个按钮，我正在开发一个单页网站，以便在移动设备上显示菜单。

在jquery中使用它：

if($(window).width() < 769){
    $('html').append('<i class="fa fa-bars menu-icon" aria-hidden="true"></i>');
}

如果最初使用大小低于769px的窗口启动网站，则显示菜单..但是如果我在大屏幕上加载页面并尝试将窗口调整为宽度低于769，则菜单图标不会显示立即。我必须刷新页面才能显示。

提前致谢

Answer 1

因为您运行的脚本只运行一次...在页面加载时我想。为什么它会对调整窗口大小做出反应？你不要在脚本中指定它。

更容易在原始html中添加图标并使用css media queries显示/隐藏它：

.menu-icon { display: none; }

@media (max-width: 768px) {
  .menu-icon { display: block; }
}

它也可以detect mobile devices via css，而不仅仅是基于窗口宽度。

Answer 2

您必须将代码放在$(window).resize()内，如下所示：每当修改页面大小时;处理程序将被调用，您可以相应地运行您的逻辑：

$('html').append('<i class="fa fa-bars menu-icon" aria-hidden="true"></i>'); //append the icon to html
$("i.fa-bars.menu-icon").hide(); //hide it initially

$(window).resize(function() {
    if($(window).width() < 769){
        $("i.fa-bars.menu-icon").show(); //show it on mobile view
    }
    else
    {
        $("i.fa-bars.menu-icon").hide(); //hide it on bigger screen
    }
}).trigger('resize');//firing the resize immediately

如何仅在移动设备上添加菜单图标？

2 个答案: