Как правильно изменить поведение функции?

Question

[LastGeneral]

Нашел часть кода которая отвечает, за показ под меню. Работает сейчас по принципу, навел на li добавился класс "active", и подменю отобразилось, а как изменить так код, что бы это происходило по клику только, а не при наведении?

jQuery(function (o) {
  "use strict";

  var n;
  t(),
  o(window).on("resize", function () {
          clearTimeout(n),
          o(".top-headers-wrapper .main-navigation > ul li.menu-item-has-children.mega-menu > .sub-menu").css("left", 0),
          n = setTimeout(function () {
                  t()
          }, 250)
  }),
  o(document).on("click", ".site-search .close-button", function () {
          o(document).find("#offCanvasTop1").removeAttr("style")
  }),
  o(".main-navigation > ul > li").on({
          mouseenter: function () {
                  o(this).addClass("active")
          },
          mouseleave: function () {
                  o(this).removeClass("active")
          }
  }),
  o(".main-navigation > ul > li ul li").on({
          mouseenter: function () {
                  clearTimeout(o(this).data("timeoutId")),
                  o(this).addClass("active")
          },
          mouseleave: function () {
                  var t = o(this),
                          e = setTimeout(function () {
                                  t.removeClass("active")
                          }, 200);
                  t.data("timeoutId", e)
          }
  })
});

Answer 1

[Сергей Соколов]

Всем убрать, этому добавить

const ACTIVE = 'active';

o(".main-navigation > ul > li").on('click', function() {
  o(".main-navigation > ul > li").removeClass(ACTIVE);
  o(this).addClass(ACTIVE);
});

Comments

[LastGeneral]

Спасибо

[LastGeneral]

А можете ещё подсказать как закрыть его? Подменю открывается, переключается, но закрыть его невозможно никак

[Сергей Соколов]

LastGeneral, по какому событию подменю должно закрываться?

[LastGeneral]

По клику на тот же пункт, на котором открыто меню

Answer 2

[roaddd]

o(".main-navigation > ul > li").on({
          click: function () {
                  o(this).toggleClass("active")
          }
  }),

Comments

[LastGeneral]

Появилась вот такая проблема

[LastGeneral]

Когда нажимаю на два они вдвоем и остаются