SlideUp DIV того же класса перед SlideDown JQuery

Question

Я уверен, что ответ прост, но; Я пытаюсь написать простой бит JQuery для системы меню ресторана на веб-сайте. Я хочу, чтобы элемент menu_list был видимым для slideUp до выбранного slidesDown. Я могу заставить это работать, задерживая slideDown, это здорово, если menu_list уже виден, но означает, что вы получаете задержку, если таковая отсутствует. Я пробовал отложить, но по какой-то причине второй menu_list просто появляется ниже текущей, вместо текущей, скользящей вверх. Я пробовал, если что-то еще, но это тоже не работает. Может ли кто-нибудь увидеть, что я делаю неправильно?

Этот код работает, но с задержкой (по понятным причинам)

$('.s_menu, .m_menu').click(function(){ 
var menuid = event.target.id; 
var mlist = ('#') + (menuid) + ('_list'); 
var last = $('.menu_list').not(mlist); 

    $(last).slideUp(400); 
    $(mlist).delay(600).slideDown(400); 

    return(false); 
    }); 
}); 

Этот код дивы появится ниже друг друга без предыдущего скольжения вверх.

function first(){$(last).slideUp(400);} 
function next(){$(mlist).slideDown(400);} 

$.when(first).then(next); 
    return(false); 
    }); 
}); 

, как это делает

if ($(last).is(':hidden')) { 
    $(mlist).slideDown(400); 
    } else {  
    $(last).slideUp(400); 
    $(mlist).delay(600).slideDown(400); 
    } 
    return(false); 
    }); 
});  

HMTL является:

<div id="menu_nav"> 

       <ul class="menu_top"> 
        <li id="menu_starters" class="menu">STARTERS</li> 
        <li id="menu_mains" class="menu" >MAINS</li> 
        <li id="menu_noodles" class="menu">NOODLES &amp RICE</li> 
       </ul> 

       <ul id="start_nav" class="menu_sub"> 
        <li id="st_meat" class="s_menu">MEAT &amp FISH</li> 
        <li id="st_veg" class="s_menu">VEGETARIAN</li> 
        <li id="st_soups" class="s_menu">SOUPS</li> 
        <li id="st_salads" class="s_menu">SALADS</li> 
       </ul> 
       <ul id="mains_nav" class="menu_sub"> 
        <li id="ma_curries" class="m_menu">CURRIES</li> 
        <li id="ma_meat" class="m_menu">MEAT</li> 
        <li id="ma_seafood" class="m_menu">SEAFOOD</li> 
        <li id="ma_veg" class="m_menu">VEGETARIAN</li> 
       </ul> 
      </div> 
<article id="st_meat_list" class="st menu_list"> 
<ul> 
<!--series of list items here--> 
</ul> 
<article id="st_veg_list" class="st menu_list"> 
<ul> 
<!--series of list items here--> 
</ul> 
<article id="st_soups_list" class="st menu_list"> 
<ul> 
<!--series of list items here--> 
</ul> 

и так далее с изделий, содержащих каждый список

Fiddle Here

Answer 1

Поскольку вы будете только га пока одно подменю не сползает все время, попробуйте скрыть() все подменю перед тем, как сползать вниз по целевому, и используйте обратный вызов hide() для перемещения по целевому меню. Может быть что-то вроде этого:

$('.s_menu, .m_menu').click(function(){ 
    var correspnding_list = $(selector_to_mlist); 
    var list = $('.common_class_of_lists'); 
    list.slideUp({ 
    complete: function(){ 
     corresponding_list.slideDown(); 
    } 
    }) 
}); 

Обновление: Пожалуйста, используйте slideToggle() вместо slideDown()

http://jsfiddle.net/XK6JX/