如何在单击其他时保持 HTML 子菜单打开

Question

我试图在打开另一个子菜单时保持子菜单打开。 目前，当我尝试打开另一个子菜单时，我的代码会关闭所有以前打开的子菜单。

现在，每当我尝试打开另一个子菜单时，我的代码都会关闭所有以前打开的子菜单。我希望每个子菜单在单击其父项时保持打开状态，并仅在单击其父项时关闭。我怎样才能实现这个目标？

//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

您需要单独处理菜单

$(() => {

  $('.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>