Question

我正在尝试制作一个简单的手风琴菜单。

我有这样的代码：

jQuery(document).ready(function ($) {
    $("#secondMenu > li > span").click(function () {
        if ($("#secondMenu > li > span").hasClass("icon-square-plus")) {
            $("#secondMenu > li > ul").slideDown();
            $("#secondMenu > li > span").removeClass("icon-square-plus");
            $("#secondMenu > li > span").addClass("icon-square-minus");
        } else {
            $("#secondMenu > li > ul").slideUp();
            $("#secondMenu > li > span").addClass("icon-square-plus");
            $("#secondMenu > li > span").removeClass("icon-square-minus");
        }
    });

    $("#secondMenu > li > ul > li > span").click(function () {
        if ($("#secondMenu > li >  ul > li > span").hasClass("icon-square-plus")) {
            $("#secondMenu > li > ul > li > ul").slideDown();
            $("#secondMenu > li > ul > li > span").removeClass("icon-square-plus");
            $("#secondMenu > li > ul > li > span").addClass("icon-square-minus");
        } else {
            $("#secondMenu > li > ul > li > ul").slideUp();
            $("#secondMenu > li > ul > li > span").addClass("icon-square-plus");
            $("#secondMenu > li > ul > li > span").removeClass("icon-square-minus");
        }
    });
});

问题是，当我点击跨度时，菜单中的所有项目都会受到影响。如何让它只选一个受影响？

Answer 1

试试这个：您正在为所有匹配的元素添加和删除类，而不是您需要为单击的元素执行此操作。使用this获取点击元素，如下所示

jQuery(document).ready(function ($) {

$("#secondMenu > li > span").click(function(){
    if ( $(this).hasClass("icon-square-plus")) {
        $(this).slideDown();
        // you can chain the addClass and removeClass calls
        $(this).removeClass("icon-square-plus").addClass( "icon-square-minus" );
    } else {
        $(this).slideUp();
        $(this).addClass( "icon-square-plus" ).removeClass( "icon-square-minus" );
    }
});

$("#secondMenu > li > ul > li > span").click(function(){
    if ( $(this).hasClass( "icon-square-plus" ) ) {
        $(this).slideDown();
        $(this).removeClass( "icon-square-plus").addClass( "icon-square-minus" );
    } else {
        $(this).slideUp();
        $(this).addClass( "icon-square-plus" ).removeClass( "icon-square-minus" );
    }
});

});

Answer 2

您可以使用this选择要点击的元素。和parent()访问父元素以到达ul元素 jQuery（document）.ready（function（$）{

$("#secondMenu > li > span").click(function(){
    if ( $(this).hasClass( "icon-square-plus" ) ) {
        $(this).parent().find("ul").slideDown();
        $(this).removeClass( "icon-square-plus" );
        $(this).addClass( "icon-square-minus" );
    } else {
        $(this).parent().find("ul").slideUp();
        $(this).addClass( "icon-square-plus" );
        $(this).removeClass( "icon-square-minus" );
    }
});

$("#secondMenu > li > ul > li > span").click(function(){
    if ( $(this).hasClass( "icon-square-plus" ) ) {
        $(this).parent().find("ul").slideDown();
        $(this).removeClass( "icon-square-plus" );
        $(this).addClass( "icon-square-minus" );
    } else {
        $(this).parent().find("ul").slideUp();
        $(this).addClass( "icon-square-plus" );
        $(this).removeClass( "icon-square-minus" );
    }
});
});

Answer 3

很难说没有小提琴，但搜索/替换可以帮助你

e.g。在您的第一次点击处理方法内部替换

$("#secondMenu > li > span")

的

$(this) $("#secondMenu > li > ul")

的

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

类似于第二次点击方法

关键字 this 会将效果限制为仅点击的元素

jQuery，只有一个孩子受到影响

3 个答案: