javascript - 菜单和 JavaScript 的复选框问题

Question

我正在学习网络开发...但我陷入了困境。

我有一个复选框菜单，选中后我必须隐藏该菜单。默认情况下，对于大屏幕，会显示菜单并且未选中该复选框，默认情况下，当屏幕低于 930px 时，必须选中该复选框...这就是我的问题我不知道如何设置:我的代码是这样的

    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";
            }

        })}

对于脚本

我的html是这样的

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

我不知道问题出在哪里，也不知道我是否能做到这一点。对不起我的英语。

保罗

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>

注意 - 此代码片段在其中不起作用。但在您的页面上，它会起作用。