jQuery 大型菜单 add/remove class parent 菜单项

Question

我正在尝试在 Shopify 中构建一个大型菜单，这就是我的 HTML:

$('.has-child').on('click', function(event) {
  event.preventDefault();
  $(this).find('.child').toggleClass('menu-visible');
  $('.child').click(function(e) {
    e.stopPropagation();
  });
});

.menu-visible{
color:red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="parent">
  <li class="parent-main has-child"><a href="/collections">Shop</a>
    <ul class="child">
      <li class=""><a href="/collections">All Collections</a></li>
    </ul>
  </li>
  <li class="parent-main has-child"><a href="/pages/about">About</a>
    <ul class="child">
      <li class=""><a href="/pages/">Child link</a></li>
      <li class=""><a href="/pages/">Child link</a></li>
    </ul>
  </li>
</ul>

只要我单击打开和关闭相同的 parent 菜单，它就可以工作，但我遇到的问题是一旦我单击一个 parent 菜单项，然后单击另一个 parent 菜单项，它将打开第一个菜单上的第二个菜单（因此，如果我单击“商店”，然后单击“关于”，它将打开“商店”菜单顶部的“关于”菜单）。我知道我需要在单击另一个 parent link 后删除“menu-visible” class 但我只是不知道如何......我尝试了一些东西用 .siblings() 但它没有用，也许我用错了......

有什么想法吗？

-谢谢。

Answer 1

只需先从所有元素中删除 class，然后在只需要的元素中删除 re-apply。

使用if ($(this).find('.child').hasClass("menu-visible")) {以便同时切换和移除其他人

$('.has-child').on('click', function(event) {
  event.preventDefault();

  if ($(this).find('.child').hasClass("menu-visible")) {
    $('.child').removeClass("menu-visible")
    $(this).find('.child').removeClass('menu-visible');
  } else {
    $('.child').removeClass("menu-visible")
    $(this).find('.child').addClass('menu-visible');
  }

  $('.child').click(function(e) {
    e.stopPropagation();
  });
});

.menu-visible {
  display: block !important;
}

.child {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="parent">
  <li class="parent-main has-child"><a href="/collections">Shop</a>
    <ul class="child">
      <li class=""><a href="/collections">All Collections</a></li>
    </ul>
  </li>
  <li class="parent-main has-child"><a href="/pages/about">About</a>
    <ul class="child">
      <li class=""><a href="/pages/">Child link</a></li>
      <li class=""><a href="/pages/">Child link</a></li>
    </ul>
  </li>
</ul>

Answer 2

$('.has-child').on('click', function(event) {
  event.preventDefault();

  $(event.currentTarget)
    .find('.child')
    .toggleClass('menu-visible')
    .parent()
    .siblings()
    .find('.child')
    .removeClass('menu-visible')

  $('.child').click(function(e) {
    e.stopPropagation();
  });
});

Answer 3

基本上您需要的是通过使用 not() 函数将显示 none 添加到所有其他子项并切换您正在单击的子项你可以在没有 if 语句的情况下实现这一点

<!DOCTYPE html>
<html>
<head>
    <title>List</title>
    <meta charset="utf-8">
    <style type="text/css">
        .d-none{
            display: none;
        }
    </style>
</head>
<body>






<ul class="parent">
  <li class="parent-main has-child"><a href="/collections">Shop</a>
    <ul class="child d-none">
      <li class=""><a href="/collections">All Collections</a></li>
    </ul>
  </li>
  <li class="parent-main has-child"><a href="/pages/about">About</a>
    <ul class="child d-none">
      <li class=""><a href="/pages/">Child link</a></li>
      <li class=""><a href="/pages/">Child link</a></li>
    </ul>
  </li>
</ul>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.parent-main a').click(function(e){
            e.preventDefault();
            $('.child').not($(this).parent().find('.child')).addClass('d-none');
            $(this).parent().find('.child').toggleClass('d-none');

        })
    });
</script>
</body>
</html>

Answer 4

This one should solve your problem.


$('.has-child').on('click tap', function(event) {
    event.preventDefault();
    if ($(this).find('.child').hasClass('menu-visible')) {
        $(this).find('.child').removeClass('menu-visible'); // toggle current
    } else { 
        $('.menu-visible').removeClass('menu-visible'); // close all
        $(this).find('.child').addClass('menu-visible'); // open current
    }
});

jQuery 大型菜单 add/remove class parent 菜单项

jQuery mega menu add/remove class on parent menu item

html

javascript

jquery

shopify