Когда открывается одна раскрывающаяся опция, другая закрывается

Question

У меня есть два варианта выпадающего меню в моем меню. В настоящее время они оба раскрываются и открываются при нажатии на ссылку. Но что мне нужно, так это то, что при нажатии на одну ссылку, в то время как другая открыта, опция открытия вернется обратно.

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>

JavaScript:

$(document).ready(function() {

    $('.toggle:not(.toggle-open)') .addClass('toggle-closed') .parents('li') .children('ul') .hide();
    $('.menutop:not(.menutop-open)') .addClass('menutop-closed') .parents('li') .children('ul') .hide();

    if($.browser.msie){
        $('.ul li:last-child .menutop') .css('border-bottom','1px solid #CCC');
    }

    $('.toggle') .click(function(){
        if ($(this) .hasClass('toggle-open')) {     
            $(this) .removeClass('toggle-open') .addClass('toggle-closed') .empty('') .append('+') .parents('li') .children('ul') .slideUp(250);
            $(this) .parent('.menutop') .removeClass('menutop-open') .addClass('menutop-closed');
        }else{
            $(this) .parent('.menutop') .removeClass('menutop-closed') .addClass('menutop-open');
            $(this) .removeClass('toggle-closed') .addClass('toggle-open') .empty('') .append('–') .parents('li') .children('ul') .slideDown(250);
        }
    })

    $('.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{
            $(this) .parent('.navmenu') .removeClass('navmenu-closed') .addClass('navmenu-open');
            $(this) .removeClass('menutop-closed') .addClass('menutop-open')  .parents('li') .children('ul') .slideDown(250);
        }
    })
})

Любая помощь будет очень ценится:)

Answer 1

Я вижу, вы даете новые классы выпадающим спискам.Используйте это, чтобы закрыть все открытые выпадающие списки, изменив свой обработчик второго клика:

$('.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);
    }
})

Пример: Демо