Question

我正在做一个手风琴菜单栏，问题是当我点击一个没有子菜单的链接时，有孩子的链接仍然打开，有人可以帮助我如何修复或改进我的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

Answer 1

在顶部的点击功能中添加：的 WORKING DEMO

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; }

<强> WORKING DEMO

Answer 2

This是我的相同实现。

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();
});

手风琴Jquery多菜单导航

2 个答案: