JQuery изменить функцию при изменении размера ниже 991px

Question

У меня есть функция щелчка в классе, и я хочу удалить ее при изменении размера экрана ниже 992px. Я имею в виду отображение "# sp-menu": block;до 992 пикселей. Моя функция:

jQuery(function ($) {
 $(".showMenu").click(function () {
 var $that = $(this);
    $("#sp-menu").toggle("display", function() {
    $that.toggleClass("showMenu-on");
    });
 });
});

Спасибо за любую помощь.

Answer 1

Вы можете сделать это с помощью CSS, просто используя медиа-запросы. Медиа-запрос - это метод CSS, введенный в CSS3. Он использует правило @media для включения блока свойств CSS только в том случае, если выполняется определенное условие.

@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

Подробнее о медиазапросах: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

или использование jquery

// Returns width of browser viewport
$( window ).width();

// Returns width of HTML document
$( document ).width();


jQuery(function ($) 
{
    $(".showMenu").click(function () 
    {
        var $that = $(this);
        if($(document).width()<992)
        {
            $("#sp-menu").toggle("display", function() 
            {
                $that.toggleClass("showMenu-on");
            });
        }
    });
});



/****************  CSS NEW ********************/
.showMenu {
    color: #000;
    .fa {
        font-size: 20px;
        color: #000;
    }

}