Question

我正在使用Jquery处理多级accordeon菜单。切换第一个子菜单时一切正常，但是当我有一个更多级别的子菜单时，它们不会显示/不执行任何操作。我很确定这是因为我在jquery上使用css处理时没有做好的事情，但我无法理解它。

以下是在线测试：

您可以点击第一个选项（“Actualitat dia a dia”），然后点击子菜单的最后一项（“Actualidad”）来检查问题，该子菜单也有一个子菜单，但它没有显示或切换。

这是jquery

$(document).ready (function(){
    $(".menu-desplegable > ul > li:has(ul)").addClass("has-sub");

    $('.menu-desplegable > ul > li > a').click(function() {
    var checkElement = $(this).next();
    $('.menu-desplegable li').removeClass('active');            
    $(this).closest('li').addClass('active');

        if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        $(this).closest('li').removeClass('active');
        checkElement.slideUp('normal');
    }

        if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('.menu-desplegable ul ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        }

        if (checkElement.is('ul')) {
        return false;
    } else {
    return true;    
     }
       });
    });

Answer 1

您已将click元素设置为.menu-desplegable > ul > li > a，因此只有直接子a绑定到该侦听器。

您需要将点击元素更改为.menu-desplegable > ul li a，以便点击嵌套的ul li a。然后，您需要更改处理ul向上滑动的块。

更改：

if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) { $('.menu-desplegable ul ul:visible').slideUp('normal'); checkElement.slideDown('normal'); }

要

if (checkElement.is('ul') && !checkElement.is(':visible')) { checkElement.slideDown('normal'); }

Live example

Answer 2

我有这个小提琴的工作解决方案。 http://jsfiddle.net/QQBbe/6/

基本上只需更改javascript如下：

$(".menu-desplegable ul li:has(ul)").addClass("has-sub");

// this will prevent the nested menu items from triggering 
// the .has-sub click event as it applies to itself and all of it's children
$('.menu-desplegable').on("click", "li", function (e) {

    e.preventDefault();
    e.stopPropagation();
});

// I would delegate the on click event like this, 
// in case you decide to dynamically add more menu options
$('.menu-desplegable').on("click", ".has-sub", function (e) {

    e.preventDefault();
    e.stopPropagation();

    // if the targets nested ul is not visible, display it
    if (!$(this).hasClass("active")) {

        $(this).addClass("active");
        $(this).children("ul").slideDown('normal');
    } else {

        $(this).removeClass("active");
        $(this).children("ul").slideUp('normal');
    }
});

Jquery手风琴多级菜单未显示子菜单

2 个答案: