Question

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

以下是我的一些代码：

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

我已经尝试过兄弟姐妹（）和.not（这个），但我无法让它发挥作用。

谢谢！

Answer 1

您是否尝试在toggleClass之前删除所有.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);
});

Answer 2

您只需切换.navigation-container并使用css设置.navigation-container {display：none}但.navigation-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");
});

如何关闭所有其他子菜单？

2 个答案: