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-Elemets子项（而不是注册侦听器的元素本身）：

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在点击时隐藏子菜单（一次只打开一个）

1 个答案: