我有手风琴和切换效果的jquery菜单。但它适用于错误:有时会关闭所有元素。
你能帮忙做到最好吗?
HTML:
<ul id="accordion">
<li>
<a href="#">Level 1</a>
<ul>
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
</ul>
</li>
<li>
<a href="#">Level 2</a>
<ul style="display: none;">
<li><a href="#">21</a></li>
<li><a href="#">22</a></li>
</ul>
</li>
</ul>
JS:
var sel = '#accordion'
$(sel + ' li a').toggle(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$(sel + ' ul:visible').slideUp('normal').removeClass('selected');
checkElement.addClass('selected').slideDown('normal', function() {
});
return false;
}
},
function() {
$(sel + ' ul:visible').removeClass('selected').slideUp('normal', function() {
});
}
);
答案 0 :(得分:1)
我查看了你的代码,我不确定切换是你正在尝试做的最好的功能,正如我所理解的那样。
我将toggle
更改为click
,我稍微改变了你的逻辑。
javascript现在看起来像这样:
var sel = '#accordion'
$(sel + ' li a').click( function(){
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
checkElement.slideUp('normal').removeClass('selected');
}
else if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$(sel + ' ul:visible').slideUp('normal').removeClass('selected');
checkElement.addClass('selected').slideDown('normal', function() {
});
}
});
通过这个javascript,我能够让菜单上下起伏,没有古怪的行为。 fiddle