带链接的JQuery嵌套菜单项

时间:2014-08-11 00:40:48

标签: jquery

我正在努力修复侧边栏上的jQuery脚本。该网站可以找到here

我想要实现的是使侧栏切换工作在具有子'ul'的每个父'li'元素上。

除非已展开,否则不应重定向父菜单项。在具有子菜单项的子菜单项上也应该发生同样的事情。没有子'ul'的菜单项应该重定向。

我的jQuery代码是:

    $('.textwidget .sub-menu .sub-menu').hide(); 
    $('.textwidget .sub-menu li').has('ul.sub-menu').each(function(){
        $(this).addClass('expand');
    });

    $('.widget_text > div > ul.sub-menu li').addClass('dead');

    $('.widget_text > div > ul.sub-menu li:has(ul)').click(function(e){

        if ( $(this).hasClass("expand") ) {
            $(this).removeClass('expand');
            $(this).addClass('collapse');
        }
        else{

            $(this).addClass('expand');
            $(this).removeClass('collapse');

        }
        $(this).find('ul').first().slideToggle();
        return false;
        //console.log($(this).closest('li.expand').attr('class'));
    });

    $('.widget_text > div > ul.sub-menu li a').click(function(e){

        if ( $(this).next('ul').is(":hidden") ) {
            e.preventDefault();
        }
        else{
            $(this).closest('ul').stop(true,false);
        }
        //console.log($(this).closest('li.expand').attr('class'));
    });

目前,由于return false;声明,它根本不会重定向。

有任何建议让这段代码正常工作吗?

1 个答案:

答案 0 :(得分:1)

据我所知,您的脚本可以简化为:

$('.textwidget .sub-menu .sub-menu').hide();
$('.widget_text > div > ul.sub-menu li').addClass('dead');
$('.textwidget .sub-menu li').has('ul.sub-menu').removeClass('dead').addClass('expand');    

$('.widget_text > div > ul.sub-menu li:has(ul)').click(function (e) {
    var $li=$(this);
    if ($li.hasClass("expand")) {     //if clicked menu not expanded    
            e.stopPropagation();
            e.preventDefault();
    } else {
        if ($(e.target).parent().is('a')) {return;} //if menu expanded and we click on link
    }
    $li.toggleClass("expand collapse").children('ul').first().slideToggle();

});

Demo