Question

JQuery的：

$(function () {
    $(".uSPInner").hide();

    //modify the "hover" to "click" and merge with thesecond "click" function. SlideToggle only if a child UL exist within the parent UL
    $(".clickMe").closest("li").hover(function () {
        $(this).closest("li").find("ul").slideDown();
    }, function () {
        $(this).closest("li").find("ul").slideUp();
    });
    $('.clickMe').click(function () {
        alert("outer clicked");
        $('.clickMe').removeAttr('id');
        $(this).attr('id', 'current');
        $('.dispArtBody').addClass('hideContent');
        var element = $(this).attr("data-toggle");
        $(element).removeClass('hideContent');
    });

    $('.uSPInner').click(function () { //if the inner LI is clicked, set the inner clicked LI ID to "current" and also the parent LI ID to "current"
        alert("inner clicked");
    });
    $('.uSPStyle li a').filter(function () {
        return $.trim($(this).html()) == '';
    }).parent().hide();
    $('.uSPInner li a').filter(function () {
        return $.trim($(this).html()) == '';
    }).parent().hide();
});

我期待的是

不是悬停，而是展开子UL，单击并合并处理它第二次点击活动。
单击子UL LI时，将其设置为“当前”，以及已点击的子UL LI的父级。

Answer 1

可能有一个更好的解决方案，但对于momen，这可以帮助你：

$('.clickMe').click(function () {

    var $this = $(this);

    $this.closest("li").find("ul").slideToggle();

    $('.clickMe').removeClass('current');

    $this.addClass('current');
    $this.parents('.uSPInner').siblings('.clickMe').addClass('current');

});

只需使用点击事件中的slideToggle() - 函数，而不是悬停函数的输入和输出处理程序。

注意：我将ID current更改为某个类，因为当您要将其应用于多个元素时，必须记住该ID必须在文档中是唯一的。

<强> Demo

Additon：

我建议将班级uSPInner设置为

.uSPInner{
    display: none;
}

而不是在页面加载时通过jQuery隐藏它。

Answer 2

您必须选择li元素并使用a函数在打开和关闭状态之间切换，而不是定位slideToggle()元素：

$(function () {
    $(".uSPInner").hide();   
    $(".clickMe").click(function () {
        $(this).closest("li").find("ul").slideToggle();
    });    
    $('.uSPStyle li a').filter(function () {
        return $.trim($(this).html()) == '';
    }).parent().hide();
    $('.uSPInner li a').filter(function () {
        return $.trim($(this).html()) == '';
    }).parent().hide();
});

如何处理嵌套列表的内部LI单击

2 个答案: