jQuery，只有一名儿童受影响

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");
        }
    });
});

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

Answer 1

试试这个：您正在向所有匹配的元素添加和删除 class，而您需要为单击的元素执行此操作。使用 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 来 select 被点击的元素。和 parent() 访问父元素以到达 ul 元素 jQuery(文档).ready(函数($) {

$("#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

如果没有 fiddle 很难判断，但是 search/replace 可以帮助您

例如在您的第一次点击处理方法中替换

$("#secondMenu > li > span") 对于 $(this)

$("#secondMenu > li > ul") 对于 $(this).closest("li").find("ul")

第二种点击方法类似

关键字 this 将影响仅限于单击的元素

jQuery，只有一名儿童受影响

jQuery, only one child affected

jquery

select

menu

accordion