Javascript 当一个下拉选项打开时,另一个将关闭

Javascript 当一个下拉选项打开时,另一个将关闭,javascript,css,menu,drop-down-menu,Javascript,Css,Menu,Drop Down Menu,我的菜单中有两个下拉选项。当前,当单击链接时,它们都是下拉和向上的。但我需要的是,当一个链接被点击而另一个链接打开时,打开选项将返回 HTML: <ul class="navmenu"> <li><div class="menutop menutop-closed"><a href="#"> MODELS</a></div> <ul class="su

我的菜单中有两个下拉选项。当前,当单击链接时,它们都是下拉和向上的。但我需要的是,当一个链接被点击而另一个链接打开时,打开选项将返回

HTML:

      <ul class="navmenu">
            <li><div class="menutop menutop-closed"><a href="#"> MODELS</a></div>
                <ul class="submenu" style="display: none; ">
                    <li><a href="/models/browse/male/main-board">+ MAIN BOARD</a></li>
                    <li><a href="/models/browse/male/new-faces">+ NEW FACES</a></li>
                    <li><a href="/models/browse/both/special-booking">+ SPECIAL BOOKING</a></li>
                    <li><a href="casting">+ CASTING PACKAGE</a></li>
                    <li><a href="casting">+ SHOW PACKAGE AW11</a></li>
                    <li><a href="/covers">+ COVERS &amp; CAMPAIGNS</a></li>
                </ul>
        </li>
    </ul>

非常感谢您的帮助:)

我看到您正在为您切换的下拉列表提供新的类。通过修改第二次单击处理程序,使用此选项关闭所有打开的下拉列表:

$('.menutop') .click(function(){
    if ($(this).hasClass('menutop-open')) {
        $(this).removeClass('menutop-open').addClass('menutop-closed').parents('li').children('ul').slideUp(250);
        $(this).parent('.navmenu').removeClass('navmenu-open').addClass('navmenu-closed');
    }
    else {
        /* the following will take the element with the menutop-open class (if there is one) and hide it */
        $('.menutop-open').removeClass('menutop-open').addClass('menutop-closed').parents('li').children('ul').slideUp(250);
        $('.menutop-open').parent('.navmenu').removeClass('navmenu-open').addClass('navmenu-closed');

        $(this).parent('.navmenu').removeClass('navmenu-closed').addClass('navmenu-open');
        $(this).removeClass('menutop-closed').addClass('menutop-open').parents('li').children('ul') .slideDown(250);
    }
})

示例:

我可能错了,但我只看到一个可以打开的菜单。其他链接指的是URL。
$('.menutop') .click(function(){
    if ($(this).hasClass('menutop-open')) {
        $(this).removeClass('menutop-open').addClass('menutop-closed').parents('li').children('ul').slideUp(250);
        $(this).parent('.navmenu').removeClass('navmenu-open').addClass('navmenu-closed');
    }
    else {
        /* the following will take the element with the menutop-open class (if there is one) and hide it */
        $('.menutop-open').removeClass('menutop-open').addClass('menutop-closed').parents('li').children('ul').slideUp(250);
        $('.menutop-open').parent('.navmenu').removeClass('navmenu-open').addClass('navmenu-closed');

        $(this).parent('.navmenu').removeClass('navmenu-closed').addClass('navmenu-open');
        $(this).removeClass('menutop-closed').addClass('menutop-open').parents('li').children('ul') .slideDown(250);
    }
})