单页响应菜单

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 或类附加到该 ul，该 ul 仅在浏览器处于 960 时应用，该浏览器显示导航的移动版本，但我不确定如何配置代码。

Answer 1

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

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