.slideToggle() 在一个 DIV 上而不是所有其他具有相同类的答案

【问题标题】：.slideToggle() on one DIV instead of all others with same class.slideToggle() 在一个 DIV 上而不是所有其他具有相同类的
【发布时间】：2012-03-10 00:12:53
【问题描述】：

我正在尝试为开胃菜、汤等创建一个带有 DIV 的菜单。我使用段落选项卡作为我的切换器。我所有的切换器都有相同的“切换”类。所有的 DIV 区域都有相同的类，“选择”。我是如何做到的，所以当我点击一个切换器时，它只会显示它正上方的 DIV 类。抱歉，我的代码很乱。

JQuery:

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

CSS：

.selection,.toggle
{
    width: 700px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: auto;
    marign-lift: auto;
    padding: 5px;
    background: white;
    border: solid 2px gray;
}
.toggle
{
    text-align: center;
}
.selection
{
    display: none;
    text-align: left;
}

HTML：

<div class="selection">
    Special Appetizer 8.95 <br>
    Small Appetizer Plate 7.50
</div>
<p class="toggle">Appetizers</p>

<div class="selection">
    Broccoli & Cream Soup $5.50 <br>
    Clam Chowder 7.50
</div>
<p class="toggle">Soups</p>

<div class="selection">
    Fried Rice 4.95 <br>
</div>
<p class="toggle">Rice</p>

【问题讨论】：

标签： jquery html hide slidetoggle

【解决方案1】：

您可以像这样定位与被点击的项目相关的项目：

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

这将获得点击的.toggle 项目并获得前一个.selection 项目和slideToggle 只是那个。

你可以在这里看到它的工作原理：http://jsfiddle.net/jfriend00/2zJ8z/

我建议对其进行改进，以便您可以单击 .selection 项目以使其消失，因为这使得使用鼠标切换浏览变得更容易：

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

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

你可以在这里看到这个小改进：http://jsfiddle.net/jfriend00/JrhNz/

如果您希望在打开一个新的时关闭任何其他打开的，您可以使用这个：

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

此选项的演示在这里：http://jsfiddle.net/jfriend00/JrhNz/6/

【讨论】：

你会不会碰巧知道如何在另一个打开时打开一个关闭？
@KarenZhen - 我在答案末尾添加了一个选项，用于关闭任何其他打开的选项。
这很有帮助。谢谢！

【解决方案2】：

我想你在找.prev()：

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

【讨论】：

你会不会碰巧知道如何在另一个打开时打开一个关闭？