Как закрывать меню при клике на другой li элемент меню?

Question

[Артём Белых]

Как можно сделать, чтобы при клике на другой li элемент, закрывался предыдущий li?

Сайт начал делать на Wordpress.
Если нажать на один из li элемента рядом со стрелочкой, то субменю появляется, но если кликнуть на другой такой же элемент, то он остаётся отрытым, и открываться другой, так вот как это можно пофиксить? И также, как по клику в пустое место его закрывать, а не только по li элементу?

вот сайт: Клик
Вот js код:

//Тут есть $(document).ready(function() и дальше идёт ещё код
$(".menu-item-has-children").click(function() {
        $(this).toggleClass("active")
    })

Answer 1

[FeST1VaL]

Просто ищите уже элемент с active т.е примерно так:
P.S на сайт не заходил, поидее сработает)

$(".menu-item-has-children").click(function() {
  var self = $(this);
    if (self.hasClass('active')) {
      self.removeClass('active');
    } else {
      $(".menu-item-has-children.active").removeClass('active');
      self.addClass('active');
    }
})

Comments

[Артём Белых]

А теперь если кликнуть обратно по этому же li элементу он не закрываться!

[FeST1VaL]

А ну да... туплю) щяс)

[Артём Белых]

FeST1VaL, И ещё чтобы оно закрывалось по клику на пустое место!

[FeST1VaL]

Артем,

$(".menu-item-has-children").click(function() {
	var self = $(this);
    if (self.hasClass('active')) {
      self.removeClass('active');
    } else {
      $(".menu-item-has-children.active").removeClass('active');
      self.addClass('active');
    }
})

[FeST1VaL]

Артем, на пустое это надо проверять event.target и если это не контейнер, то закрыть

[FeST1VaL]

Артем, примерно так:
P.S накидал на быструю руку так сказать) под себя немного измените

$(document).mouseup(function (e) {
	var box = $('.menu');
	var container = $(".menu-item-has-children");
	if (box.has(e.target).length === 0){
		if(container.hasClass('active')) {
			container.removeClass('active');
		}
	}
});

[Артём Белых]

FeST1VaL, Спасибо огромное!