jquery - Dropdown closes when another dropdown is clicked

Question

I have an issue where I have a few dropdown elements. I need the others to collapse when one is clicked to expand.

The page can be viewed here:

http://www.mniac.com/smartlessons/template.html

This is the jQuery:

$('.advanced').click(function(){
    $('.drop-box.advanced-search').slideToggle();
});

$('#smart-lessons > a').click(function(){
    //$('.drop-box').hide();
    $('#smart-lessons a').toggleClass('open');
    $('#about a').removeClass('open');
    $('.drop-box.smart').slideToggle();
});

$('#about > a').click(function(){
    //$('.drop-box').hide();
    $('#about a').toggleClass('open');
    $('#smart-lessons a').removeClass('open');
    $('.drop-box.about').slideToggle();
});

I am trying to close all .drop-box elements before performing the script, but it just closes and reopens when the same link is clicked.

Answer 1

尝试将上面的所有代码替换为：

$('.nav ul > li > a').click(function() {
    $('.drop-box').slideUp();
    if ($(this).parents('#search').length) {
        $('.advanced-search').slideDown();
    } else {
        $(this).next('.drop-box').slideDown();
    }
    return false;
});