Question

我试图让它成为只有当浏览器小于768px时，我的导航栏项目才会切换隐藏或在带有＆＃34; navlogo＆＃34;的元素时显示。点击。我知道我不是最具描述性的，但这是我的代码。

if ($(window).width() < 768) {

    $(".navlogo").click( function (){
        $(".navwrapper").toggle();
    });
    $(".navitem").click( function (){
        $(".navwrapper").hide();
   });

}

我知道这实际上会被标记为重复，但事实并非如此。问题是我希望它能够在没有刷新的情况下工作。如果它需要Angular.js那么知道要使用哪些代码会很有帮助，因为我不介意使用它但是我只是想让用户不必每次都刷新以获得正确的结果。

此外，当我没有

时会发生一个错误

if ($(window).width() < 768) {}

是的，它仍然可以正常工作，但即使网站不处于移动模式，当最大宽度为768px或更低时，当用户点击元素时使用＆＃34; navlogo，＆＃34;它仍然隐藏了＃34; navwrapper。＆＃34;这还不错，但问题是当用户点击带有＆＃34; navitem的元素时我也希望它隐藏。＆＃34;

谢谢！

Answer 1

if语句应该在click函数中：

$(".navlogo").click( function (){
    if ($(window).width() < 768) {
        $(".navwrapper").toggle();
    }
});
$(".navitem").click( function (){
    if ($(window).width() < 768) {
        $(".navwrapper").hide();
    }
});

修改：

要在调整窗口大小时隐藏/显示.navwrapper，您可以收听窗口调整大小事件。

$(window).on('resize', function(e) { if ($(window).width() > 767 && $(".navwrapper").is(':hidden')) { $(".navwrapper").show(); } });

一些注意事项：

尝试将变量用于将被多次调用的选择器

为提高效率，请尝试附上resize function in a timeout
中的内容
尝试尽可能使用CSS来响应而不是使用JavaScript

Answer 2

我不确定您是仅想在桌面设备上还是在移动设备和桌面设备上试用它。如果你想要两个，你可以使用两个事件：

移动设备的“orientationChange”和桌面设备的“调整大小”

像，

var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

现在，

$(window).on(orientationEvent, function(evt){
   if ($(window).width() < 768) {
    $(".navlogo").click( function (){
        $(".navwrapper").toggle();
    });
    $(".navitem").click( function (){
        $(".navwrapper").hide();
   });
}
});

Answer 3

我建议使用.resize（）

$(window).resize(function() {
    if(this.width() < 768) {
        $(".navlogo").click( function (){
            $(".navwrapper").toggle();
        });
        $(".navitem").click( function (){
            $(".navwrapper").hide();
        });
    }
});

浏览器调整大小时，if（$（window）.width（）＆lt; 768）{}无法正常工作。我该如何解决？

3 个答案: