Jquery .slideToggle（）在一个DIV上，而不是在具有相同类的所有其他DIV上

我正在尝试创建一个菜单，其中包含开胃菜、汤等的div。我使用段落选项卡作为切换工具。我所有的切换程序都有相同的“切换”类。所有的DIV区域都有相同的类，“selection”。当我点击一个切换按钮时，它会在它的正上方显示DIV类。对不起，我的代码很乱

JQuery：

$(document).ready(function(){
$('.toggle').click(function(){
    $('.selection').slideToggle("slow");
  });<br>
});

HTML:

特殊开胃菜8.95

小盘开胃菜7.50
开胃菜

西兰花奶油汤$5.50

蛤蜊浓汤7.50
汤

炒饭4.95

大米

我想您正在寻找：

---

您可以针对与单击的项目相关的项目，如下所示：

$(document).ready(function(){
    $('.toggle').click(function(){
        $(this).prev('.selection').slideToggle("slow");
    });
});

这将获得单击的

.toggle

项目，并获得上一个

.selection

项目，然后滑动切换该项目

您可以在此处看到它的工作原理：

我建议对其进行改进，以便您可以单击.selection项使其消失，因为这样可以更轻松地切换鼠标浏览：

$(document).ready(function(){
    $('.toggle').click(function(){
        $(this).prev('.selection').slideToggle("slow");
    });

    $('.selection').click(function(){
        $(this).slideToggle("slow");
    });
});​

您可以在此处看到此小增强：

如果您希望在打开新窗口时关闭任何其他打开的窗口，可以使用以下方法：

$(document).ready(function(){
    $('.toggle').click(function(){
        var prev = $(this).prev('.selection');
        $(this).siblings('.selection').not(prev).slideUp("slow");
        prev.slideToggle("slow");
    });

    $('.selection').click(function(){
        $(this).siblings('.selection').slideUp("slow");
        $(this).slideToggle("slow");
    });
});​

---

此处演示此选项：

您是否知道如何在另一个打开时关闭打开的选项？@KarenZhen-我在回答的末尾添加了一个选项，可以关闭任何其他打开的选项。这很有帮助。非常感谢。当另一个打开时，你会知道如何关闭一个打开的吗？

$(document).ready(function(){
    $('.toggle').click(function(){
        $(this).prev('.selection').slideToggle("slow");
    });
});

$(document).ready(function(){
    $('.toggle').click(function(){
        $(this).prev('.selection').slideToggle("slow");
    });

    $('.selection').click(function(){
        $(this).slideToggle("slow");
    });
});​

$(document).ready(function(){
    $('.toggle').click(function(){
        var prev = $(this).prev('.selection');
        $(this).siblings('.selection').not(prev).slideUp("slow");
        prev.slideToggle("slow");
    });

    $('.selection').click(function(){
        $(this).siblings('.selection').slideUp("slow");
        $(this).slideToggle("slow");
    });
});​