如何关闭所有其他子菜单

How to close all other submenus?

本文关键字：菜单其他何关闭更新时间：2023-09-26

我有一个带全屏下拉菜单的导航栏。on单击我想打开一个下拉菜单，如果另一个下拉列表已经打开，我想关闭另一个菜单。

这是我的一点代码：

Javascript：

$(".sub-link").click(function(){
   $(this).children(".navigation-container, a, .navigation-overlay").toggleClass("active");
   $(this).children(".navigation-container, .navigation-overlay").fadeToggle(250);
});

Html:

<!-- BEGIN NAVIGATION -->
<section class="navbar">
    <div class="navbar-logo">
        <img src="assets/img/Logo.png">
    </div>
    <div class="navbar-menu-container">
        <div class="navigation-overlay"></div>
        <ul class="navbar-menu">
            <a href="#"><li>Home</li></a>
            <a href="#"><li>Voor de kinderen</li></a>
            <a href="#"><li>Voor de ouders</li></a>
            <a href="#" class="active"><li class="sub-link">Over de school
                            <!-- Sub-Menu -->
                            <div class="navigation-container">
                                <div class="sub-menu-title">Over de school</div>
                                <div class="sub-item-container">
                                    <ul>
                                        <a href="#"><li><img src="assets/img/NavPoint.png"> Onze school in beeld</li></a>
                                        <a href="#"><li><img src="assets/img/NavPoint.png"> Teamfoto</li></a>
                                        <a href="#"><li><img src="assets/img/NavPoint.png"> Even voorstellen</li></a>
                                    </ul>
                                    <ul>
                                        <a href="#"><li><img src="assets/img/NavPoint.png"> Onze school in beeld</li></a>
                                        <a href="#"><li><img src="assets/img/NavPoint.png"> Teamfoto</li></a>
                                        <a href="#"><li><img src="assets/img/NavPoint.png"> Even voorstellen</li></a>
                                    </ul>
                                    <ul>
                                        <a href="#"><li><img src="assets/img/NavPoint.png"> Onze school in beeld</li></a>
                                        <a href="#"><li><img src="assets/img/NavPoint.png"> Teamfoto</li></a>
                                        <a href="#"><li><img src="assets/img/NavPoint.png"> Even voorstellen</li></a>
                                    </ul>
                                </div>
                            </div>
                            <!-- END Sub-Menu -->
                        </li></a>
            <a href="#"><li>Fotogalerij</li></a>
            <a href="#"><li>Nieuws</li></a>
            <a href="#"><li>Contact</li></a>
            <a href="#"><li class="navbar-search"><img src="assets/img/Search.png"></li></a>
        </ul>
    </div>
    <div class="hamburger-menu">
        <div id="hamburger1"></div>
        <div id="hamburger2"></div>
        <div id="hamburger3"></div>
    </div>
</section>
<!-- END NAVIGATION -->

我已经用siblings（）和.not（this）尝试了一些东西，但我无法让它发挥作用。

谢谢！

您只需要切换.navigation容器并使用css来设置.navigation-container｛display:none｝，但需要设置.naviation-container.active{display:inline｝

$(".sub-link").click(function(){
       $(this).children(".navigation-container").toggleClass("active");
    });

请在此处查看小提琴：https://jsfiddle.net/xn0t4b9f/1/

要进行衰落，只需稍微更改JQuery：

$(".sub-link").click(function(){
$(".navigation-container").removeClass("active");
$(this).children(".navigation-container").fadeToggle("active");
});

toggleClass之前是否尝试删除all.active？

$(".sub-link").click(function(){
   $(this).children(".navigation-container.active, 
                      a.active, 
                     .navigation-overlay.active").removeClass("active");
   $(this).children(".navigation-container, a, .navigation-overlay").toggleClass("active");
   $(this).children(".navigation-container, .navigation-overlay").fadeToggle(250);
});