JQuery - 使用 !important 属性切换 class

Question

我有一个呈现以下标记的框架：

 <div class="menuButton">
    <button id="menuButton">Menu</button>
 </div>
 <ul class="menuList">
     <li><a href="#" tabindex="1" id="nav_home">
                    Home
         </a>
     </li>
     <li><a href="#" tabindex="1" id="nav_services">
                    Services
          </a>
     </li>
 </ul>
        

它还具有以下 css ，仅在小型设备上显示菜单按钮：

 #menuButton {
     display: none; 
 }  

 @media only screen and (min-width : 769px) {
    .menuList {
       display: block !important;
    }
 }  

 
 @media only screen and (max-width : 768px) {
     #menuButton {
        display: block;
     }

    .menuList {
       display: none;
     }

  }

一个下面的 javascript 来切换菜单

  $('#menuButton').click(function() {
    $(".menuList").toggle();
    return false;
  });

无论屏幕大小如何，我都希望显示菜单按钮并切换菜单列表，即无论屏幕大小如何都有一个移动菜单。 我可以通过如下方式覆盖 css 来做到这一点，但我无法覆盖菜单列表，因为它使用的是：important 属性和 jquery 切换 ZC1C425268E68385D1AB5074C'="styledisplay;4 仅添加块。" 到元素。

  #menuButton {
     display: block; 
 }

 @media only screen and (min-width: 769px) {
   .menuList {
       display: none !important;
   }
 }

如何获得切换 function 以添加style="display: block;important;" 或者我如何才能实现我想要做的事情，即无论屏幕大小如何都有一个移动菜单。 注意我只能覆盖 css 并添加我自己的 javascript 但不能编辑开箱即用的 javascript。

Answer 1

使用toggleClass您应该能够轻松覆盖!important声明。

 $('#click').on('click', function() { $('#block').toggleClass('open'); });

 #block{ display: none;important. } #block:open { display; block!important; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="click">click</div> <div id="block">block</div>