Question

我是jquery的新手所以请跟我说:(

我在页面上有一个带有css类名“one”的倍数按钮，每个按钮与另一个css类名为“two”的按钮相关联。

默认情况下，“two”设置为display：none，单击“one”时显示两个。当用户点击页面上的任何位置时，“two”将消失。

我希望当用户点击“一个”时，将显示“一个”旁边的“两个”，而不是显示所有“两个”。

我有以下代码，但不知道如何修改以符合我的目标：

$(document).on("click", function (e) {
    var clickedElement = $(e.target);

    if (clickedElement.hasClass("one") ) {
        //$(this).next().show(400, "linear"); <--my approach....but sadly didn't work
        $(".two").show(400, "linear");
    }
    else {
        $(".two").hide();
    }
});

如果你想看到它，我做了一个demo：）

Answer 1

你很接近这一行：

//$(this).next().show(400, "linear"); <--my approach....but sadly didn't work

如果你把它改成这样就可以了：

clickedElement.next(".two").show(400, "linear");

Answer 2

尝试以下方法：

$(document).on("click", function (e) {
        var clickedElement = $(e.target);


        if (clickedElement.hasClass("one") ) {
            clickedElement.next().show(400, "linear");
        }
        else {
            $(".two").hide();
        }
    });

http://jsfiddle.net/Lwsu7ov9/3/

Answer 3

根据您的描述，这有效：

$(document).on("click", function (e) {
    $(".two").hide();
});
$('button.one').click(function (e) {
    e.stopPropagation();
    $(this).next().show(400, "linear");
})

<强> jsFiddle example

jquery show隐藏多个项目

3 个答案: