Проблемы с флажком для меню и javascript

Question

Я изучаю веб-разработку ... И я застрял.

У меня есть меню-флажок, при его проверке я должен скрыть меню. по умолчанию для большого экрана отображается меню, и флажок снят, и по умолчанию, когда экран меньше 930 пикселей, флажок должен быть установлен ... это моя проблема, я не знаю, как это настроить: мой код такой

    var largeur = window.innerWidth;
    var checkbox = document.querySelector('input[name=menuOn]');

    if(largeur< 930) {
        checkbox.checked;
        checkbox.addEventListener('change',function(){
            if(this.checked) {
                document.getElementById('testHide').style.display = "none";
                document.getElementById('altMenu').style.display = "unset";
            }
            else {
                document.getElementById('testHide').style.display = "unset";
                document.getElementById('altMenu').style.display = "none";
            }

        })}

Для сценария

my html это

 <div class="switchContainer">
     <input type="checkbox" class="headerSwitch" name="menuOn">
<p id="altMenu" class="altMenu">Menu</p> 
 </div>

Я не знаю, где проблема, и если я нахожусь на хорошем пути сделать это. Извините за мой английский sh.

Пол

Answer 1

Это необходимо сделать как при загрузке страницы, так и при изменении размера окна.

Пожалуйста, проверьте приведенный ниже пример -

$( document ).ready(function() {
   myFunction();
});

$(window).on("load resize",function(e){
  myFunction();
});


function myFunction(){
  var largeur = window.innerWidth;
  var checkbox = document.querySelector('input[name=menuOn]');
  if(largeur< 930) {
    checkbox.checked;
    checkbox.addEventListener('change',function(){
      if(this.checked) {
          document.getElementById('testHide').style.display = "none";
          document.getElementById('altMenu').style.display = "unset";
      }
      else {
          document.getElementById('testHide').style.display = "unset";
          document.getElementById('altMenu').style.display = "none";
      }
    })
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="switchContainer">
     <input type="checkbox" class="headerSwitch" name="menuOn">
     <p id="altMenu" class="altMenu">Menu</p> 
     <div id="testHide">testHide</div>
 </div>

Примечание. Этот фрагмент не будет работать в нем. Но на вашей странице это будет работать.