Question

使用ul li a构建一页响应式下拉菜单，当点击汉堡包在移动设备上关闭它时，它将正确隐藏ul。问题是当我调整大小以查看桌面版本并选择也隐藏ul的菜单项时。我无法弄清楚如何只为移动版本定位ul ...这里是js

菜单JS

<ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Music</a></li>
        <li><a href="#">Hey</a></li>
        <li><a href="#">Hey</a></li>
      </ul>
      
hey<br>
<br>hey<br>
<br>hey<br>
<br>hey<br>
<br>hey<br>
<br>hey<br>
<br>hey<br>
<br>hey<br>
<br>hey<br>
<br>hey<br>
<br>hey<br>
<br>hey<br>
<br>hey<br>
<br>hey<br>
<br>hey<br>
<br>hey<br>
<br>hey<br>
<br>

HTML

    (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);

我需要通过js将id或类广告到ul，只有当浏览器位于960时才会应用，这显示了导航的移动版本，但我不确定如何配置代码

Answer 1

我能够通过使用：

来解决这个问题

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

一页响应式菜单

1 个答案: