Hello. Tell me how to make the code run only with a screen width less than 992px

link to codepen

var toggle = $(".toggle"); var menu = $(".menu"); var link = $(".menu li"); var wid = $(window).width(); toggle.click(function(){ $(this).toggleClass("on"); menu.slideToggle(); return false; }); $(window).resize(function(){ if(wid > 992 && $(".menu").is(":hidden")) { $(".menu").removeAttr("style"); } }); // ЭТОТ КОД ДОЛЖЕН ВЫПОЛНЯТСЯ ТОЛЬКО ПРИ ШИРИНЕ МЕНЬШЕ 992px !!!! $(document).click(function(e){ if ($(e.target).closest(".menu").length) return; $('.menu').slideUp(); toggle.removeClass("on"); e.stopPropagation(); }); link.click(function(){ $(this).parent(".menu").slideUp(); toggle.removeClass("on"); }); // 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="toggle" href="#"><span></span>menu</a> <ul class="menu clearfix"> <li><a href="#test">item-1</a></li> <li><a href="#">item-2</a></li> <li><a href="#">item-3</a></li> </ul>

    2 answers 2

    You can use jQuery .width() and add .resize() to catch changes in the width of the window:

     if ($(window).width() < 992) { menuHandler(); } $(window).on('resize', function() { if ($(window).width() < 992) { menuHandler(); } }); var menuHandler = function() { $(document).click(function(e) { if ($(e.target).closest(".menu").length) return; $('.menu').slideUp(); toggle.removeClass("on"); e.stopPropagation(); }); link.click(function(){ $(this).parent(".menu").slideUp(); toggle.removeClass("on"); }); }
    • Such a construction works, if the screen width was already less than 992px when loading, but if initially there was more width and then narrowed the window, the script does not work, and vice versa, if it was <992 when loading, and then we increase, the menu disappears - Oleg
    • then you need to combine with .resize() - corrected code - Zoltan Toth
    • menuHandler() continues to run when the screen resizes to more than 992px, and everything else works as it should - Oleg
    • Thanks, it was useful to me too !!! - Kate

    If you need exactly the width of the screen of the device, you can use screen.width .

    If you need the width of the browser window, then (without jQuery):

     var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

    example for screen width:

     var toggle = $(".toggle"); var menu = $(".menu"); var link = $(".menu li"); var wid = $(window).width(); toggle.click(function() { $(this).toggleClass("on"); menu.slideToggle(); return false; }); $(window).resize(function() { if (wid > 992 && $(".menu").is(":hidden")) { $(".menu").removeAttr("style"); } }); if (screen.width < 992) { $(document).click(function(e) { if ($(e.target).closest(".menu").length) return; $('.menu').slideUp(); toggle.removeClass("on"); e.stopPropagation(); }); link.click(function() { $(this).parent(".menu").slideUp(); toggle.removeClass("on"); }); } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="toggle" href="#"><span></span>menu</a> <ul class="menu clearfix"> <li><a href="#test">item-1</a> </li> <li><a href="#">item-2</a> </li> <li><a href="#">item-3</a> </li> </ul>