Javascript 当出现特定的屏幕宽度和类别时，请执行某些操作_Javascript_Jquery

Javascript 当出现特定的屏幕宽度和类别时，请执行某些操作

javascript jquery

Javascript 当出现特定的屏幕宽度和类别时，请执行某些操作,javascript,jquery,Javascript,Jquery,当顶部菜单打开时，我试图让我的身体元素下降12ems。我做了一些与我类似的回答，但运气不好。它没有坏，但似乎也没有跑。有人知道我做错了什么吗 var w = window.innerWidth; if ( w < 991.98 && $('#mainNav').hasClass('header-active') ) { console.log("hello") $('#target').addClass('body-active')

当顶部菜单打开时，我试图让我的身体元素下降12ems。我做了一些与我类似的回答，但运气不好。它没有坏，但似乎也没有跑。有人知道我做错了什么吗

   var w = window.innerWidth;

    if ( w < 991.98 && $('#mainNav').hasClass('header-active') ) {
      console.log("hello")
       $('#target').addClass('body-active');
   } else {
       $("#target").removeClass("body-active");
   };

<!--body tag top and nav-->
   <body id="target">

<!-- Page Content -->
<div class="jumbotron jumbotron-fluid hero">
  <!-- Navigation -->
  <header class="masthead d-flex justify-content-center">
   <nav class="navbar navbar-expand-lg fixed-top" id="mainNav">
     Nav</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
       <i class="fas fa-bars fa-inverse"></i>
     </button>
     <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
       <div class="navbar-nav">
         <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
         <a class="nav-item nav-link" href="#">Features</a>
         <a class="nav-item nav-link" href="#">Pricing</a>
         <a class="nav-item nav-link disabled" href="#">Disabled</a>
       </div>
     </div>
   </nav>

谢谢

在没有看到该代码的更多上下文的情况下，看起来它在页面加载时只会运行一次，然后就再也不会运行了。您需要在菜单打开时执行此代码—可能在发生这种情况时会触发一个事件。您当前的逻辑只有在页面加载时才会运行，大概是在菜单关闭时。您必须在触发菜单弹出时放置此代码。您在哪里运行此代码？需要在

resize

事件列表中查看HTML和CSS也会有所帮助。请你把它改成这个问题好吗。

.header-active {
   background-color: $blk !important;
  }
.body-active {
   margin-top: 12em;
 }