如果浏览器视口处于特定宽度或更大，则切换“.show”和“.hide”，条件是始终“.show”。 （Responsive/Mobile 菜单）

Question

我有一个响应式菜单。当菜单达到 tablet/mobile 宽度时，它会变成移动菜单。菜单中有 2 个特殊按钮。 #toggleReg 和 #toggleLogin

当下拉菜单打开时。 #toggleReg 和 #toggleLogin 设置为 .show 但是当菜单下拉菜单关闭时它们被设置为 .hide ... 很简单。

但是因为这是响应式菜单的一部分。如果浏览器视口宽度高于 768px，我需要 #toggleReg 和 #toggleLogin 始终 .show；

如何添加一个条件来为我解决这个问题。由于目前设置宽度达到768px以下时隐藏；通过媒体查询，然后如果通过下面的 js 代码段“打开”移动菜单，则告知再次显示。

这是我当前的代码。

  $.fn.menumaker = function(options) {
      
      var cssmenu = $(this), settings = $.extend({
        title: "Menu",
        format: "dropdown",
        sticky: false
      }, options);

      return this.each(function() {
        cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
        $(this).find("#menu-button").on('click', function(){
            $('#toggleReg').hide();
            $('#toggleLogin').hide();
          $(this).toggleClass('menu-opened');
          var mainmenu = $(this).next('ul');
          if (mainmenu.hasClass('open')) { 
            mainmenu.hide().removeClass('open');
            
          }
          else {
            mainmenu.show().addClass('open');
            $('#toggleReg').show();
            $('#toggleLogin').show();
            if (settings.format === "dropdown") {
              mainmenu.find('ul').show();
            }
          }
        });

我正在与 cssmenumaker source file

合作

感谢您的帮助！

Answer 1

我认为如果您在允许点击之前处理 window 大小，您应该能够确保按钮显示出来。然后，如果 window 较小，它将检查按下的按钮。

$.fn.menumaker = function(options) {
    var cssmenu = $(this), settings = $.extend({
        title: "Menu",
        format: "dropdown",
        sticky: false
    }, options);

    return this.each(function() {
        cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
        //Add this clause
        if($(window).width() >= 768){
            $('#toggleReg').show();
            $('#toggleLogin').show();
        } else {
            $(this).find("#menu-button").on('click', function(){
            $('#toggleReg').hide();
            $('#toggleLogin').hide();
            $(this).toggleClass('menu-opened');
            var mainmenu = $(this).next('ul');
            if (mainmenu.hasClass('open')) { 
                mainmenu.hide().removeClass('open');
            } else {
                mainmenu.show().addClass('open');
                $('#toggleReg').show();
                $('#toggleLogin').show();
                if (settings.format === "dropdown") {
                    mainmenu.find('ul').show();
                }
            }
        }
    });
}

这对 window 调整大小不起作用 - 仅当 window 加载时。

更新 我通常是这样写的：

function menuState() {
    var winW = $(window).width();
    if(winW >= 768) {
        //Handle Large Menu
        $('#toggleReg').show();
        $('#toggleLogin').show();
    } else {
        //Handle Mobile Menu
        $('#toggleReg').hide();
        $('#toggleLogin').hide();
        $(document).on('click', '#menu-button', function() {
            var menuClass = $(this).attr('class').split(" ")[1];
            if(menuClass == "menu-opened") {
                $(this).removeClass('menu_opened');
                $(this).next('ul').removeClass('open');
            } else {
                $(this).addClass('menu-opened');
                var mainMenu = $(this).next('ul');
                if(mainMenu.hasClass('open')) {
                    mainMenu.hide().removeClass('open');
                } else {
                    mainMenu.show().addClass('open');
                    $('#toggleReg').show();
                    $('#toggleLogin').show();
                    if (settings.format === "dropdown") {
                        mainmenu.find('ul').show();
                    }
                }
            }
        });
    } 
}
$(document).ready(function(){
    menuState();
});
$(window).resize(function(){
    menuState();
});

您可以注释掉该函数并将其粘贴到 javascript 文件中。