所以,我有一个简单的菜单:当你点击ONE显示ONE ITEMS时,当你点击TWO时会显示两个项目。 ONE和TWO具有切换功能,因此它们在点击时向下和向下滑动,但是当我在不关闭ONE的情况下切换TWO时,事情会变得混乱。
$(function() {
$('li.sub', '#navigation').each(function() {
var $li = $(this);
var $div = $('div.submenu', $li);
var top = $li.height();
$li.toggle(function() {
$div.css('top', top).
slideDown('slow');
},
function() {
$div.
slideUp('slow');
});
});
});
答案 0 :(得分:2)
你可以试试这个
$(function() {
$('#navigation li.sub').click(function(e) {
var el = $(this).find('.submenu');
$('.submenu').not(el).slideUp(function(){
el.slideToggle();
});
});
});
更新:
$(function() {
$('#navigation li.sub').click(function(e) {
var el = $(this).find('.submenu');
if(el.hasClass('open'))
{
el.slideUp(function(){
el.removeClass('open');
});
}
else
{
var opened = $('.submenu.open');
if(opened.length)
{
opened.slideUp(function(){
opened.removeClass('open');
el.slideToggle(function(){
el.addClass('open');
});
})
}
else
{
el.slideToggle(function(){
el.addClass('open');
});
}
}
});
});
答案 1 :(得分:1)
要解决此问题,您需要以编程方式触发已打开的任何列表项的切换。
最简单的方法是在显示刚刚单击的菜单的div之前添加代码以隐藏所有div。
例如,编辑函数使其显示为:
$li.toggle(function() {
$('div.submenu:visible').parent('li.sub').click();
$div.css('top', top).
slideDown('slow');
},
此解决方案假设您可能希望拥有两个以上的列表项,并且可以缩放任何数字。如果您知道您只有两个列表项,则可以直接调用列表项。