Collapsiable menu close all except target, when it open in jQuery

user3733831
June 16, 2024
148 views
0 votes
2 Answers

This is the HTML structure of my sidebar menu. Submenu is a collapsible menu.

<ul class="block-navigation" id="sidebar-navigation">
  <li class="navigation-item has-child navigation-submenu">
    <a class="open-submenu" href="#">
      School Affairs
      <em></em>
    </a>
    <ul class="block-navigation-submenu">
      <li class="navigation-item">
        <a class="" href="#">
          <span>School Affairs</span>
        </a>
      </li>
      <li class="navigation-item">
        <a class="" href="#">
          <span>National Schools</span>
        </a>
      </li>
      <li class="navigation-item">
        <a class="" href="#">
          <span>Teacher Transfers</span>
        </a>
      </li>
    </ul>
  </li>
  <li>
    ----- 
    -----
  </li>
</ul>

My question is, I need to close all submenus except target one. Submenu triggering by clicking on the <em> element inside parent <a>

This is how I tried it in jQuery

$("#sidebar-navigation li.navigation-submenu > a > em").on('click', function(e) {
   e.preventDefault();   

  let $el = $(this).parent().parent('li'); 
  $($el).not($el).removeClass("active");
  $($el).not($el).find(".navigation-submenu").slideUp();
  
  $(this).parent().parent('li').toggleClass("active");
  $(this).parent().parent('li').find(".navigation-submenu").slideToggle();

});

But this only work to open submenu.. Hope some body may help me out.

Answers

$($el) will select only one element $el it self. See the selected elements length in my snippet console.

You can use siblings().

$($el).siblings()

Or class selector

$(".navigation-submenu").not($el)

$("#sidebar-navigation li.navigation-submenu > a > em").on("click", function(e) {
  e.preventDefault();
  let $el = $(this).parent().parent("li");
  console.log(`$($el).not($el).length=${$($el).not($el).length}n$($el).siblings().length=${$($el).siblings().length}`);
  $($el).siblings().removeClass("active");
  $($el).siblings().find(".navigation-submenu").slideUp();

  $el.toggleClass("active");
  $el.find(".navigation-submenu").slideToggle();
});

.navigation-submenu.active a {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<ul class="block-navigation" id="sidebar-navigation">
  <li class="navigation-item has-child navigation-submenu">
    <a class="open-submenu" href="#">
                School Affairs
                <em>toggle</em>
            </a>
    <ul class="block-navigation-submenu">
      <li class="navigation-item">
        <a class="" href="#">
          <span>School Affairs</span>
        </a>
      </li>
      <li class="navigation-item">
        <a class="" href="#">
          <span>National Schools</span>
        </a>
      </li>
      <li class="navigation-item">
        <a class="" href="#">
          <span>Teacher Transfers</span>
        </a>
      </li>
    </ul>
  </li>
  <li class="navigation-item has-child navigation-submenu">
    <a class="open-submenu" href="#">
                School Affairs
                <em>toggle</em>
            </a>
    <ul class="block-navigation-submenu">
      <li class="navigation-item">
        <a class="" href="#">
          <span>School Affairs</span>
        </a>
      </li>
      <li class="navigation-item">
        <a class="" href="#">
          <span>National Schools</span>
        </a>
      </li>
      <li class="navigation-item">
        <a class="" href="#">
          <span>Teacher Transfers</span>
        </a>
      </li>
    </ul>
  </li>
</ul>

Consider the following.

$(function() {
  $("#sidebar-navigation li.navigation-submenu > a > em").on('click', function(e) {
    e.preventDefault();

    var $self = $(this);
    var $active = $("li.navigation-submenu.active");
    $active.find("ul").slideUp("fast", function() {
      $(this).parent().removeClass("active");
      $self.closest("li").find("ul").slideDown("fast", function() {
        $(this).parent().addClass("active");
      });
    });

  });
});

.navigation-submenu .block-navigation-submenu {
  display: none;
}

.navigation-submenu.active .block-navigation-submenu {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<ul class="block-navigation" id="sidebar-navigation">
  <li class="navigation-item has-child navigation-submenu active">
    <a class="open-submenu" href="#">
      School Affairs
      <em>[O]</em>
    </a>
    <ul class="block-navigation-submenu">
      <li class="navigation-item">
        <a class="" href="#">
          <span>School Affairs</span>
        </a>
      </li>
      <li class="navigation-item">
        <a class="" href="#">
          <span>National Schools</span>
        </a>
      </li>
      <li class="navigation-item">
        <a class="" href="#">
          <span>Teacher Transfers</span>
        </a>
      </li>
    </ul>
  </li>
  <li class="navigation-item has-child navigation-submenu">
    <a class="open-submenu" href="#">
      Menu 2
      <em>[O]</em>
    </a>
    <ul class="block-navigation-submenu">
      <li class="navigation-item">
        <a class="" href="#">
          <span>Sub Menu 1</span>
        </a>
      </li>
      <li class="navigation-item">
        <a class="" href="#">
          <span>Sub Menu 2</span>
        </a>
      </li>
      <li class="navigation-item">
        <a class="" href="#">
          <span>Sub Menu 3</span>
        </a>
      </li>
    </ul>
  </li>
  <li class="navigation-item has-child navigation-submenu">
    <a class="open-submenu" href="#">
      Menu 3
      <em>[O]</em>
    </a>
    <ul class="block-navigation-submenu">
      <li class="navigation-item">
        <a class="" href="#">
          <span>Sub Menu 1</span>
        </a>
      </li>
      <li class="navigation-item">
        <a class="" href="#">
          <span>Sub Menu 2</span>
        </a>
      </li>
      <li class="navigation-item">
        <a class="" href="#">
          <span>Sub Menu 3</span>
        </a>
      </li>
    </ul>
  </li>
</ul>

This closes the active list, removes the class, opens the target, and adds the class to it.

Please signup or login to give your own answer.

Click here to cancel reply.