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

Question

fiddle :http://jsfiddle.net/34ng9sto/14/

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

可能有更好的解决方案，但目前这可以帮助您:

$('.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

---

补充:

我建议将类 uSPInner 设置为

.uSPInner{
    display: none;
}

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