skip to Main Content

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.

2

Answers


  1. $($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>
    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search