Функция Javascript, которая не работает, если ширина экрана превышает 516 пикселей?

Question

Я пытался создать мобильное навигационное меню с HTML и javascript.Таким образом, я создал четыре ссылки, флажок и функцию, которая может скрывать ссылки, когда флажок снят, и отображать их, когда он установлен, работает нормально, единственная проблема - Я не хочу, чтобы функция выполнялась, еслиширина экрана превышает 516 пикселей. Вот что у меня получилось («переключатель» - это идентификатор флажка, а «ссылки» - это идентификатор ссылок):

function togglemenu() {

  var toggle = document.getElementById("toggle");

   var links = document.getElementById("links");


  if (toggle.checked == true){
links.style.display = "block";
  }

if (toggle.checked == false){
links.style.display = "none";
  }
}

Вот мой обновленный код:

function togglemenu() {
  var toggle = document.getElementById("toggle");
    
  var links = document.getElementById("links");


  if (document.body.clientWidth <= 516) { 
    
    if (toggle.checked == true){
    links.style.display = "block";
  }
       
    if (toggle.checked == false){
    links.style.display = "none";
  }
}

Все еще не работает.Вот все это в jsfiddle ...

Answer 1

Вы можете использовать приведенный ниже код для добавления условия в ваш код.

if (window.screen.width > 516 ){
  // do stuff
}

Вот ссылка для получения дополнительной информации.

Answer 2

use $(window).width() в операторе if, чтобы получить ширину пользовательского окна, затем проверьте, превышает ли оно 516px

JQUERY Код:

function togglemenu() {

var toggle = document.getElementById("toggle");

var links = document.getElementById("links");


if ($(window).width() > 516) {
    //if width is greater than 516px
    if (toggle.checked == true) {
        links.style.display = "block";
    }

    if (toggle.checked == false) {
        links.style.display = "none";
    }
}

}

JS код:

document.body.clientWidth используйте это вместо чистого js, у вас отсутствует конечная скобка } в function togglemenu()

 function togglemenu() {
        alert(document.body.clientWidth);//to check the current client width
        if (document.body.clientWidth <= 516) {
            alert("working");//just to check if it really works
            var toggle = document.getElementById("toggle");
            var links = document.getElementById("links");
            if (toggle.checked == true) {
                links.style.display = "block";

            }

            if (toggle.checked == false) {
                links.style.display = "none";
            }
        }
    }

Answer 3

Оператор if проверяет document.body.clientWidth, как рекомендовано здесь: https://developer.mozilla.org/en-US/docs/Web/API/Document/width

document.querySelector('#test').addEventListener('click', test);

function test(event) {
  let target = document.querySelector('#content');
  target.innerHTML = `screen width ${document.body.clientWidth}px`;
  if(document.body.clientWidth <= 516) {
    target.innerHTML = Date.now().toString();
  }
}

<button id="test">Test</button>
<div id="content"></div>

Answer 4

Вы можете использовать window.matchMedia().См. Получение уведомлений о запросах

if (window.matchMedia("(min-width: 516px)").matches) {
  /* The viewport is at least 516 pixels wide */
} else {
  /* The viewport is less than 516 pixels wide */
  // do stuff
}