CODEWITHSUNDEEP
jquery
kennycrippen
kennycrippen

Reputation: 86

Toggle Class for $this, hide others

I am building an on click dropdown menu in WordPress. Everything is working as it should but I am stumped on one feature. The dropdown menu expands and collapses on click by toggling a "show" class. I also need to add functionality to hide an expanded dropdown if another parent nav item is clicked. This way 2 drop downs will never be open at the same time. Code is below, thank you.

HTML

<ul id="primary-nav">
  <li class="menu-item-has-children">Parent Nav Item One

    <!-- if Parent Nav Item Two is clicked and this sub-menu is visible, hide this sub-menu -->
    <ul class="sub-menu">
      <li class="menu-item-has-children">Drop Down Item
        <ul class="sub-menu">
          <li>Drop Down Sub Item</li>
          <li>Drop Down Sub Item</li>
        </ul>
      </li>
      <li>Drop Down Item</li>
    </ul>
  <li class="menu-item-has-children">Parent Nav Item Two

    <!-- if Parent Nav Item One is clicked and this sub-menu is visible, hide this sub-menu -->
    <ul class="sub-menu">
      <li>Drop Down Item</li>
      <li>Drop Down Item</li>
    </ul>
  </li>
</ul>

JS

$('#primary-nav .menu-item-has-children').click(function() {
  $('> .sub-menu', this).toggleClass('show');
});

Upvotes: 1

Views: 1209

Answers (1)

Shomz
Shomz

Reputation: 37701

Just hide them all first, while keeping the state of the clicked one so you can toggle it: 

$('#primary-nav .menu-item-has-children').click(function() {
  var state = $('> .sub-menu', this).hasClass('show');
  $('#primary-nav .menu-item-has-children .sub-menu').removeClass('show');
  $('> .sub-menu', this).toggleClass('show', !state);
});
.sub-menu {display: none}
.sub-menu.show {display: block}
.menu-item-has-children {cursor: pointer}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="primary-nav">
  <li class="menu-item-has-children">Parent Nav Item One

    <!-- if Parent Nav Item Two is clicked and this sub-menu is visible, hide this sub-menu -->
    <ul class="sub-menu">
      <li class="menu-item-has-children">Drop Down Item
        <ul class="sub-menu">
          <li>Drop Down Sub Item</li>
          <li>Drop Down Sub Item</li>
        </ul>
      </li>
      <li>Drop Down Item</li>
    </ul>
  <li class="menu-item-has-children">Parent Nav Item Two

    <!-- if Parent Nav Item One is clicked and this sub-menu is visible, hide this sub-menu -->
    <ul class="sub-menu">
      <li>Drop Down Item</li>
      <li>Drop Down Item</li>
    </ul>
  </li>
</ul>

Upvotes: 3

Related Questions