мобильный гамбургер для мобильного не закрывается

Question

У меня 2 проблемы с этим кодом:

1. Когда подменю на мобильном телефоне опускается, «X» не закрывает его обратно
2. Я разобрал проблему с якорными ссылками (#), которые находятся на подуровне. Они закрывают выпадающее меню, но не заменяют «X» на «гамбургер»

Заранее благодарю за помощь. Это временный файл: http://www.un -poco.com / navtemp

(function($) {
  $.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() {
        $(this).toggleClass('menu-opened');
        var mainmenu = $(this).next('ul');
        if (mainmenu.hasClass('open')) {
          mainmenu.hide().removeClass('open');
        } else {
          mainmenu.show().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').hide();
          } else {
            $(this).siblings('ul').addClass('open').show();
          }
        });
      };

      if (settings.format === 'multitoggle') 
        multiTg();
      else 
        cssmenu.addClass('dropdown');

      if (settings.sticky === true) 
        cssmenu.css('position', 'fixed');

      resizeFix = function() {
        if ($(window).width() > 768) {
          cssmenu.find('ul').show();
        }

        if ($(window).width() <= 768) {
          cssmenu.find('ul').hide().removeClass('open');
        }
      };
      resizeFix();
      return $(window).on('resize', resizeFix);
    });
  };
})(jQuery);

(function($) {
  $(document).ready(function() {
    if ($(window).width() <= 768) {
      $('#cssmenu  ul ul li').on('click', function() {
        $("#cssmenu ul").hide();
      });
    }

    $("#cssmenu").menumaker({
      title: "",
      format: "multitoggle"
    });
  });
})(jQuery);

Answer 1

Поскольку в мобильном представлении ul раскрывающийся список переходит в меню гамбургеров, поэтому ваше событие клика не сработает. Попробуйте использовать поле вместо отступа в вашем стиле ul. Смотри ниже код -

CSS-

#cssmenu > ul {
    margin-top: 43px;
    float: right;
}

Чтобы получить значок гамбургера в выпадающем списке, вам нужно просто изменить класс #menu-button, как показано ниже:

Код JS -

(function($) {
  $(document).ready(function() {
    if ($(window).width() <= 768) {
      $('#cssmenu  ul ul li').on('click', function() {
        // add this line only in your code might be solve your issue
        $('#cssmenu').find('#menu-button').addClass('menu-opened').removeClass('menu-closed'); 
        $("#cssmenu ul").hide();
      });
    }

    $("#cssmenu").menumaker({
      title: "",
      format: "multitoggle"
    });
  });
})(jQuery);

Answer 2

Проблема с вашим стилем CSS. В раскрывающемся меню есть верхний отступ. Вы можете найти отступ здесь # cssmenu> ul . Причина, по которой меню не закрывалось, потому что щелчок не был произведен на вашем значке x, а на выпадающем элементе div. измените отступ на margin, который сместит весь div ниже, что должно работать.