使用 jQuery 隐藏点击时的子菜单（一次只打开一个）

Question

我在尝试让子菜单按我希望的方式工作时遇到问题。这是我的要求列表（以及到目前为止我得到的）：

一次只打开一个子菜单（有效）
点击切换子菜单（不适用于同一项目）

所以现在的问题是当你点击打开一个子菜单时，如果你点击同一个父锚点它不会关闭。不过其他功能工作正常。

JS

$('.menu-item-has-children > a').click(function () {
    if ($(this).hasClass("show")) {
        $('.sub-menu').removeClass('show');
    } else {
        $('.sub-menu').removeClass('show');
        $(this).next('ul').toggleClass('show');
    }
});

HTML

<ul id="menu-menu-1" class="menu">
    <li><a href="#">Home</a></li>
    <li class="menu-item-has-children"><a href="#">Our Advantage</a>
        <ul class="sub-menu">
            <li><a href="#">Why Choose Us</a></li>
            <li><a href="#">Affordability</a></li>
            <li><a href="#">Blah Blah Blah</a></li>
            <li><a href="#">Advanced Technology</a></li>
        </ul>
    </li>
    <li class="menu-item-has-children"><a href="#">Contact</a>
        <ul class="sub-menu">
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Blah Blah Blah</a></li>
            <li><a href="#">Appointments</a></li>
        </ul>
    </li>
</ul>

CSS

#menu-menu-1 li.menu-item-has-children ul {
    position: absolute;
    z-index: -1;
    transform: translateY(-100%);
    opacity: 0;
    transition: all .3s ease;
}

#menu-menu-1 li.menu-item-has-children ul.show {
    position: relative;
    z-index: 1;
    transform: translateY(0);
    opacity: 1;
    transition: all .3s ease;
}

感谢您的帮助！

Answer 1

您需要检查 if 语句中的 A 元素子元素（而不是注册侦听器的元素本身）：

JS

$('.menu-item-has-children > a').click(function () {
    if ($(this).next('ul').hasClass("show")) {
        $('.sub-menu').removeClass('show');
    } else {
        $('.sub-menu').removeClass('show');
        $(this).next('ul').toggleClass('show');
    }
});

使用 jQuery 隐藏点击时的子菜单（一次只打开一个）

Using jQuery to hide sub-menu's on click (only one open at a time)

jquery

menu

click

submenu