javascript - if ($(window).width() < 768) {} not working when browser resizes. How do I fix this? - Stack Overflow

admin管理员组

文章数量:1292558

I'm trying to make it so that only when the browser is less than 768px, my navigation bar items will toggle hidden or shown when an element with "navlogo" is clicked. I know I'm not the most descriptive, but here's my code.

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

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

}

I know this is actually going to get marked as a duplicate but it's not. The thing is that I want it to be able to even work without refreshing. If it requires Angular.js then it would be helpful to know what code to use for that because I wouldn't mind using it but yeah I just want for the user to not have to refresh every time to get the correct result.

Also, one bug that happens when I don't have the

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

is that yes it still works properly but even if the website is not in mobile mode, which occurs when the max width is 768px or lower, when the user clicks the element with "navlogo," it still hides the "navwrapper." That's not bad but the thing is that I also want it to hide when a user clicks on an element with "navitem."

Thank you!

I'm trying to make it so that only when the browser is less than 768px, my navigation bar items will toggle hidden or shown when an element with "navlogo" is clicked. I know I'm not the most descriptive, but here's my code.

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

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

}

I know this is actually going to get marked as a duplicate but it's not. The thing is that I want it to be able to even work without refreshing. If it requires Angular.js then it would be helpful to know what code to use for that because I wouldn't mind using it but yeah I just want for the user to not have to refresh every time to get the correct result.

Also, one bug that happens when I don't have the

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

is that yes it still works properly but even if the website is not in mobile mode, which occurs when the max width is 768px or lower, when the user clicks the element with "navlogo," it still hides the "navwrapper." That's not bad but the thing is that I also want it to hide when a user clicks on an element with "navitem."

Thank you!

• javascript
• jquery
• html
• css
• angularjs

Share Improve this question Follow edited Nov 12, 2016 at 20:01 Kenneth Rhodes asked Nov 12, 2016 at 19:45 Kenneth RhodesKenneth Rhodes 9711 gold badge11 silver badge99 bronze badges 6

• 3 Why would it work without a resize event handlers ? – adeneo Commented Nov 12, 2016 at 19:46
• 3 Maybe take a look at CSS media queries. developer.mozilla/en-US/docs/Web/CSS/Media_Queries/… – Gijs Mater Commented Nov 12, 2016 at 19:48
• 1 Yeah, resize handlers are the answer, but doing this in CSS looks like the much better way. No need for JS anymore here – Pekka Commented Nov 12, 2016 at 19:48
• @Pekka웃 I don't believe you can do this in CSS. If you can, post an answer please, thank you :) – Kenneth Rhodes Commented Nov 12, 2016 at 20:00
• No, you're right, this exact thing can indeed not be done in CSS. – Pekka Commented Nov 12, 2016 at 20:05

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 5

The if statement should be inside the click function:

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

Edit:

To hide/show the .navwrapper when the window is resized you can listen to the window resize event.

$(window).on('resize', function(e) {

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

});

Some considerations:

• Try to use variables for selectors that will be called several times
• For efficiency try to enclose what happens in the resize function in a timeout
• Try to use CSS where possible for responsive instead of JavaScript

I am not sure if you want to try it only on desktop devices or both mobile and desktop devices. In case, you want for both you can use two events:

"orientationChange" for mobile devices and "resize" for desktop devices

Like,

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

Now,

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

I remend using .resize ()

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

本文标签： javascriptif ((window)width() lt 768)not working when browser resizes How do I fix thisStack Overflow