How to keep a HTML Submenu Opened When Clicking on Other

Question

I am trying to keep the submenu open when opening another submenu. Currently, my code closes all previously opened submenus when trying to open another one.

Right now, my code closes any previously open submenus whenever I try to open another one. I want each submenu to stay open when I click its parent item, and close only when clicking it's parent item. How can I achieve this?

//Close submenu when opening another one
$(document).ready(function() {

  $('.parent-link').click(function(e) {
    e.preventDefault();
    var submenu = $(this).siblings('.submenu');
    if (submenu.hasClass('open')) {
      submenu.removeClass('open').slideUp();
    } else {
      $('.submenu.open').removeClass('open').slideUp();
      submenu.addClass('open').slideDown();
    }
  });

  var currentRoute = "{{ Request::url() }}";
  $('.child-link').each(function() {
    if ($(this).attr('href') === currentRoute) {
      $(this).addClass('active');
      $(this).closest('.submenu').addClass('open').slideDown();
      $(this).closest('.nav-item').find('.parent-link').addClass('active');
    }
  });
});

.submenu {
  display: none;
}

.submenu.active {
  display: block;
}

.submenu.open {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
<ul>
  <li class="">
    <a class='parent-link'>
      <span class="fa-stack pull-left">
        <i class="fa fa-light fa-gauge-high fa-stack-1x "></i>
      </span>
      <span class="me-2 d-flex align-items-center justify-content-between">
        Data<i class="fa-solid fa-angle-down"></i>
      </span>
    </a>
    <ul class="submenu planner-submenu-sidebar list-unstyled">
      <li class="nav-item {{ request()->routeIs('home*') ? 'current-menu-highlight' : '' }}">
        <a href="{{ route('home') }}" class='child-link'>
          <span class="fa-stack pull-left invisible">
            <i class="fa fa-light fa-gauge-high fa-stack-1x "></i>
          </span>
          <span>Item1</span>
        </a>
      </li>
      <li class="nav-item {{ request()->routeIs('ff') ? 'current-menu-highlight' : '' }}">
        <a href="#" class='child-link'>
          <span class="fa-stack pull-left invisible">
            <i class="fa fa-light fa-gauge-high fa-stack-1x "></i>
          </span>
          <span>Item2</span>
        </a>
      </li>
    </ul>
  </li>
  <li class="">
    <a class='parent-link'>
      <span class="fa-stack pull-left">
        <i class="fa fa-light fa-gauge-high fa-stack-1x "></i>
      </span>
      <span class="me-2 d-flex align-items-center justify-content-between">
        Account<i class="fa-solid fa-angle-down"></i>
      </span>
    </a>
    <ul class="submenu planner-submenu-sidebar list-unstyled">
      <li class="nav-item {{ request()->routeIs('ff') ? 'current-menu-highlight' : '' }}">
        <a href="#" class='child-link'>
          <span class="fa-stack pull-left invisible">
            <i class="fa fa-light fa-gauge-high fa-stack-1x "></i>
          </span>
          <span>Item1</span>
        </a>
      </li>
      <li class="nav-item {{ request()->routeIs('ff') ? 'current-menu-highlight' : '' }}">
        <a href="#" class='child-link'>
          <span class="fa-stack pull-left invisible">
            <i class="fa fa-light fa-gauge-high fa-stack-1x "></i>
          </span>
          <span>Item2</span>
        </a>
      </li>
    </ul>
  </li>
</ul>

Answer 1

You need to handle the menus independently.

$(() => {

  $('.parent-link').on('click', function(e) {
    e.preventDefault();
    var submenu = $(this).siblings('.submenu');
    if (submenu.hasClass('open')) {
      submenu.removeClass('open').slideUp();
    } else {
      submenu.addClass('open').slideDown();
    }
  });

  var currentRoute = "{{ Request::url() }}";
  $('.child-link').each(function() {
    if ($(this).attr('href') === currentRoute) {
      $(this).addClass('active');
      $(this).closest('.submenu').addClass('open').slideDown();
      $(this).closest('.nav-item').find('.parent-link').addClass('active');
    }
  });
});

.submenu {
  display: none;
}

.submenu.active {
  display: block;
}

.submenu.open {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
<ul>
  <li class="">
    <a class='parent-link'>
      <span class="fa-stack pull-left">
        <i class="fa fa-light fa-gauge-high fa-stack-1x "></i>
      </span>
      <span class="me-2 d-flex align-items-center justify-content-between">
        Data<i class="fa-solid fa-angle-down"></i>
      </span>
    </a>
    <ul class="submenu planner-submenu-sidebar list-unstyled">
      <li class="nav-item {{ request()->routeIs('home*') ? 'current-menu-highlight' : '' }}">
        <a href="{{ route('home') }}" class='child-link'>
          <span class="fa-stack pull-left invisible">
            <i class="fa fa-light fa-gauge-high fa-stack-1x "></i>
          </span>
          <span>Item1</span>
        </a>
      </li>
      <li class="nav-item {{ request()->routeIs('ff') ? 'current-menu-highlight' : '' }}">
        <a href="#" class='child-link'>
          <span class="fa-stack pull-left invisible">
            <i class="fa fa-light fa-gauge-high fa-stack-1x "></i>
          </span>
          <span>Item2</span>
        </a>
      </li>
    </ul>
  </li>
  <li class="">
    <a class='parent-link'>
      <span class="fa-stack pull-left">
        <i class="fa fa-light fa-gauge-high fa-stack-1x "></i>
      </span>
      <span class="me-2 d-flex align-items-center justify-content-between">
        Account<i class="fa-solid fa-angle-down"></i>
      </span>
    </a>
    <ul class="submenu planner-submenu-sidebar list-unstyled">
      <li class="nav-item {{ request()->routeIs('ff') ? 'current-menu-highlight' : '' }}">
        <a href="#" class='child-link'>
          <span class="fa-stack pull-left invisible">
            <i class="fa fa-light fa-gauge-high fa-stack-1x "></i>
          </span>
          <span>Item1</span>
        </a>
      </li>
      <li class="nav-item {{ request()->routeIs('ff') ? 'current-menu-highlight' : '' }}">
        <a href="#" class='child-link'>
          <span class="fa-stack pull-left invisible">
            <i class="fa fa-light fa-gauge-high fa-stack-1x "></i>
          </span>
          <span>Item2</span>
        </a>
      </li>
    </ul>
  </li>
</ul>