我确定答案很简单,但是;我正在尝试为网站上的餐厅菜单系统编写一些简单的 Jquery。我希望 menu_list 项目在所选的一个 slidesDown 之前对 slideUp 可见我可以通过延迟 slideDown 来使其工作,如果 menu_list 已经可见,这很好,但如果不可见,则意味着你会得到延迟。我试过推迟,但由于某种原因,第二个 menu_list 只是出现在当前菜单的下方,而不是当前的菜单先向上滑动。我已经尝试过 if else 但这也不起作用。谁能看到我做错了什么?
此代码有效但延迟(原因很明显)
$('.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);
});
});
此代码 div 显示在彼此下方,而之前没有向上滑动。
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 & RICE</li>
</ul>
<ul id="start_nav" class="menu_sub">
<li id="st_meat" class="s_menu">MEAT & 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>
依此类推,文章包含每个列表