Javascript 当屏幕宽度小于480时，预期功能不激活

header.js

<script>



document.addEventListener('DOMContentLoaded', () => {


                          let windowWidth = window.Width;
                          let withinMobile = 480;

                          let close = document.getElementById('close');
                          let mySidenav = document.getElementById("mySidenav");
                          let header_links = document.getElementsByClassName('header-link');
                          let humberger = document.getElementById('humberger');
                          header_links = Array.from(header_links);

                          close.addEventListener('click', () => {

                          mySidenav.style.width = '0';

                             }, false);

                          humberger.addEventListener('click', () => {

                                            mySidenav.style.width = '250px';

                                               }, false);

                     while(windowWidth < withinMobile) {

                           for (let i = 0; i < header_links.length; i++) {

                           header_links[i].addEventListener('click', () => {



                                     mySidenav.style.width = '0';



                                                            }, false);

                          }

                          }







                          }, false);

</script>

document.addEventListener（'DOMContentLoaded'，（）=>{
设windowWidth=window.Width；
let within mobile=480；
let close=document.getElementById（'close'）；
让mySidenav=document.getElementById（“mySidenav”）；
让header_links=document.getElementsByClassName（'header-link'）；
设humberger=document.getElementById（'humberger'）；
header\u links=Array.from（header\u links）；
close.addEventListener（'单击'，（）=>{
mySidenav.style.width='0'；
}，假）；
humberger.addEventListener（'单击'，（）=>{
mySidenav.style.width='250px'；
}，假）；
while（窗口宽度<内移动）{
for（设i=0；i{
mySidenav.style.width='0'；
}，假）；
}
}
}，假）；

home.php

<header>
        <div id='title'>
          <h1>花見川IT寺小屋</h1>
        </div>
 <?php include('js/header.php')?>
 <div id='mySidenav' class='sidenav'>
          <a href='javascript:void(0)' class='closebtn' id='close'>&times;</a>
          <a class='header-link' href='#trial' id='free-header'>無料体験</a>
          <a class='header-link' href='#curriculum'>学習内容</a>
          <a class='header-link' href='#price'>料金</a>
          <a class='header-link' href='#mentor' >講師</>
          <a class='header-link' href='#contact'>お問い合わせ</a>
        </div>

 <div id="humberger">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </header>

花見川信息技术寺小屋

我希望while上下文中的函数处于活动状态，而只有“window.innerHight 模式详细信息，id为'mySidenav'的div标记在打开（

width:250px；

）后无法关闭（

width:0；

）

如何使其工作？

在附加事件处理程序之前，不要检查宽度，请在所述处理程序内执行。附加处理程序应该总是并且只发生一次，因此不需要

while

循环。然后，当处理程序的代码实际执行时，您必须检查宽度，这就是IF

document.addEventListener(
  "DOMContentLoaded",
  () => {
    let windowWidth = window.innerWidth;
    let withinMobile = 480;

    let close = document.getElementById("close");
    let mySidenav = document.getElementById("mySidenav");
    let header_links = document.getElementsByClassName("header-link");
    let humberger = document.getElementById("humberger");
    header_links = Array.from(header_links);

    close.addEventListener(
      "click",
      () => {
        mySidenav.style.width = "0";
      },
      false
    );

    humberger.addEventListener(
      "click",
      () => {
        mySidenav.style.width = "250px";
      },
      false
    );

    //while(windowWidth < withinMobile) <---- NOT HERE
    for (let i = 0; i < header_links.length; i++) {
      header_links[i].addEventListener(
        "click",
        () => {
          if (windowWidth < withinMobile) { //<---- HERE
            mySidenav.style.width = "0";
          }
        },
        false
      );
    }
  },
  false
);

document.addEventListener(
“DOMContentLoaded”，
() => {
设windowWidth=window.innerWidth；
let within mobile=480；
let close=document.getElementById（“close”）；
让mySidenav=document.getElementById（“mySidenav”）；
让header_links=document.getElementsByClassName（“header link”）；
设humberger=document.getElementById（“humberger”）；
header\u links=Array.from（header\u links）；
close.addEventListener(
“点击”，
() => {
mySidenav.style.width=“0”；
},
假的
);
humberger.addEventListener(
“点击”，
() => {
mySidenav.style.width=“250px”；
},
假的
);
//while（窗口宽度<内移动）{
如果（windowWidthwhile

循环。然后，当处理程序的代码实际执行时，您必须检查宽度，这就是if

document.addEventListener(
  "DOMContentLoaded",
  () => {
    let windowWidth = window.innerWidth;
    let withinMobile = 480;

    let close = document.getElementById("close");
    let mySidenav = document.getElementById("mySidenav");
    let header_links = document.getElementsByClassName("header-link");
    let humberger = document.getElementById("humberger");
    header_links = Array.from(header_links);

    close.addEventListener(
      "click",
      () => {
        mySidenav.style.width = "0";
      },
      false
    );

    humberger.addEventListener(
      "click",
      () => {
        mySidenav.style.width = "250px";
      },
      false
    );

    //while(windowWidth < withinMobile) <---- NOT HERE
    for (let i = 0; i < header_links.length; i++) {
      header_links[i].addEventListener(
        "click",
        () => {
          if (windowWidth < withinMobile) { //<---- HERE
            mySidenav.style.width = "0";
          }
        },
        false
      );
    }
  },
  false
);

document.addEventListener(
“DOMContentLoaded”，
() => {
设windowWidth=window.innerWidth；
let within mobile=480；
let close=document.getElementById（“close”）；
让mySidenav=document.getElementById（“mySidenav”）；
让header_links=document.getElementsByClassName（“header link”）；
设humberger=document.getElementById（“humberger”）；
header\u links=Array.from（header\u links）；
close.addEventListener(
“点击”，
() => {
mySidenav.style.width=“0”；
},
假的
);
humberger.addEventListener(
“点击”，
() => {
mySidenav.style.width=“250px”；
},
假的
);
//while（窗口宽度<内移动）{
if（窗宽<内移动）{//我感谢你的解决方案。我会尽力去做的。@AY很高兴听到。如果这个答案是解决方案，请标记它，如果不是，我鼓励你发布一个答案并标记它为接受。永远想想未来的读者。我感谢你的解决方案。我会尽力去做。@AY很高兴听到这个答案。如果这个答案是解决方案，请如果不是的话，我鼓励你发布一个答案，并将其标记为接受。永远为未来的读者着想