一页响应式菜单

Question

使用ul li a制作一页响应式下拉式菜单，当汉堡包在移动时点击关闭它，它会正确隐藏ul。问题是，当我调整大小以查看桌面版本并选择ul隐藏的菜单项时。我无法弄清楚如何做到目标仅针对移动版UL ...这里是JS

菜单JS

(function($) { 
     $.fn.menumaker = function(options) { 
     var cssmenu = $(this), 
      settings = $.extend({ 
      format: "dropdown", 
      sticky: false 
      }, options); 
     return this.each(function() { 
      $(this).find(".button-mobile").on('click', function() { 
      $(this).toggleClass('menu-opened'); 
      var mainmenu = $(this).next('ul'); 
      if (mainmenu.hasClass('open')) { 
       mainmenu.slideToggle().removeClass('open'); 
      } else { 
       mainmenu.slideToggle().addClass('open'); 
       if (settings.format === "dropdown") { 
       mainmenu.find('ul').show(); 
       } 
      } 
      }); 
      cssmenu.find('li ul').parent().addClass('has-sub'); 
      multiTg = function() { 
      cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>'); 
      cssmenu.find('.submenu-button').on('click', function() { 
       $(this).toggleClass('submenu-opened'); 
       if ($(this).siblings('ul').hasClass('open')) { 
       $(this).siblings('ul').removeClass('open').slideToggle(); 
       } else { 
       $(this).siblings('ul').addClass('open').slideToggle(); 
       } 
      }); 
      }; 
      if (settings.format === 'multitoggle') multiTg(); 
      else cssmenu.addClass('dropdown'); 
      if (settings.sticky === true) cssmenu.css('position', 'fixed'); 
      resizeFix = function() { 
      var mediasize = 960; 
      if ($(window).width() > mediasize) { 
       cssmenu.find('ul').show(); 
      } 
      if ($(window).width() <= mediasize) { 
       cssmenu.find('ul').hide().removeClass('open'); 
      } 
      }; 
      resizeFix(); 
      return $(window).on('resize', resizeFix); 
     }); 
     }; 
    })(jQuery); 

    (function($) { 
     $(document).ready(function() { 
     $("#cssmenu").menumaker({ 
      format: "multitoggle" 
     }); 
     $("#cssmenu ul li a").on('click','li', function() { 
      $(".button-mobile").removeClass('menu-opened'); 
     // $(this).next('ul').show(); 
     }); 
    }); 
    })(jQuery); 

HTML

<header> 
     <div class="container logo-nav"> 
      <div class="sixteen columns"> 
       <div class="logo"></div> 
       <nav id="cssmenu"> 
        <div class="button-mobile"></div> 
        <ul> 
         <li><a href="#about" class="smoothScroll">ABOUT</a></li> 
         <li><a href="#services" class="smoothScroll">SERVICES</a></li> 
         <li><a href="#research-media" class="smoothScroll">RESEARCH-MEDIA</a></li> 
         <li><a href="#creative" class="smoothScroll">CREATIVE</a></li> 
         <li class="buttonfill"><a href="#contact" class="smoothScroll">CONTACT</a></li> 
        </ul> 
       </nav> 
      </div> 
     </div> 
     <hr> 
    </header><!-- End Header --> 

我需要通过js添加一个id或class到这个ul，它只会在浏览器显示导航的移动版本的960时才被应用，但我不知道如何配置代码。

Answer 1

我能够通过使用来解决这个问题：

$("#cssmenu ul").css('display', '');