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

Question

[LastGeneral]

<nav class="main-navigation">
  <ul class="maga-menu__list">
    <li class="mega-menu__item">
      <a>Пункт 1</a>
      <ul class="sub-menu">
        <li class="menu-item">
          <a>Под пункт 1</a>
        </li>	
        <li class="menu-item">
          <a>Под пункт 2</a>
        </li>	
      </ul>
    </li>
    <li class="mega-menu__item">
      <a>Пункт 2</a>
      <ul class="sub-menu">
        <li class="menu-item">
          <a>Под пункт 1</a>
        </li>	
        <li class="menu-item">
          <a>Под пункт 2</a>
        </li>
      </ul>
    </li>
    <li class="mega-menu__item">
      <a>Пункт 3</a>
      <ul class="sub-menu">
        <li class="menu-item">
          <a>Под пункт 1</a>
        </li>	
        <li class="menu-item">
          <a>Под пункт 2</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

ul {
    list-style-type: none;
}
.maga-menu__list {
  display: flex;
  gap: 20px;
}
.sub-menu {
  display: none;
}
.active .sub-menu {
  display: block;
}

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

Comments

[Сергей Сергей]

$ this toggleClass

[LastGeneral]

Сергей Сергей,

var ACTIVE = 'active';
	$(".main-navigation > ul > li").on('click', function() {
		$(".main-navigation > ul > li").removeClass(ACTIVE);
		$(this).toggleClass(ACTIVE);
	});

Если так, то не работает

[LastGeneral]

Сергей Сергей, а так одновремено могут оба подменю открыться, а так не должно быть

var ACTIVE = 'active';
  $(".main-navigation > ul > li").on('click', function() {
    $(this).toggleClass(ACTIVE);
  });

[Сергей Сергей]

Хммммм, может быть, надо как-то совместить оба варианта?

[LastGeneral]

Сергей Сергей, вот так получилось

var ACTIVE = 'active';
$(".main-navigation > ul > li").on('click', function() {
  let clickedElementIsActive = $(this).hasClass(ACTIVE);  
  $(".main-navigation > ul > li").removeClass(ACTIVE);
  
  clickedElementIsActive ? $(this).removeClass(ACTIVE): $(this).addClass(ACTIVE);
});

Answer 1

[LastGeneral]

var ACTIVE = 'active';
$(".main-navigation > ul > li").on('click', function() {
  let clickedElementIsActive = $(this).hasClass(ACTIVE);  
  $(".main-navigation > ul > li").removeClass(ACTIVE);
  
  clickedElementIsActive ? $(this).removeClass(ACTIVE): $(this).addClass(ACTIVE);
});

Comments

[Сергей Сергей]

мощно

// а так
$(".main-navigation > ul > li").not(this).removeClass(ACTIVE);
$(this).toggleClass(ACTIVE);