我正在做一个手风琴菜单栏,问题是当我点击一个没有子菜单的链接时,有子菜单的链接仍然打开,有人可以帮我修复或改进我的jquery,我想要的是这样的。如果我单击没有子项的链接,则所有手风琴都设置为关闭。
function initMenu() {
$(".sub-menu").hide();
$('#accordion1 li a').click(
function () {
var checkElement = $(this).next();
if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
checkElement.slideUp('normal');
return false;
}
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#accordion1 ul:visible').not(checkElement.parentsUntil('#accordion1')).slideUp('normal');
checkElement.slideDown('normal');
return false;
}
});
$('.current-menu-item').parentsUntil('#accordion1').slideDown('normal');
}
$(function () {
initMenu();
});
$(function () {
var selector = '.menu li';
$(selector).on('click', function () {
$(selector).removeClass('active');
$(this).addClass('active');
});
$('.menu').delegate('li', 'click', function () {
$(this).addClass('active').siblings().removeClass('active');
});
});
这里是JSFIDDLE
在
顶部的点击功能中添加以下内容:工作演示
if($(this).parent().children('ul').length<1)
{
$('#accordion1 ul:visible').not(checkElement.parentsUntil('#accordion1')).slideUp('normal');
}
编辑 1
为您在评论中提到的问题添加以下代码:
if($(this).parents('ul').length>1 && $(this).parent().children('ul').length==0)
{
return;
}
工作演示
这是我
的实现。
function initMenu() {
$(".sub-menu").hide();
$('#accordion1 li a').click(
function () {
var checkElement = $(this).next();
var allelems = $('#accordion1 li ul');
allelems.not(checkElement).slideUp('normal');
checkElement.slideDown('normal');
});
}
$(function () {
initMenu();
});