jquery 显示隐藏多个项目

Question

我是 jquery 新手，所以请耐心等待:(

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

“two”默认设置为“display:none”，当单击“one”时，将显示“two”。当用户点击页面上的任意位置时，“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");