Question

我正在尝试为开胃菜，汤等创建一个带有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>

Answer 1

您可以将项目相对于被点击的项目定位，如下所示：

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

这将点击.toggle项目并获取之前的.selection项目，并滑动切换该项目。

您可以在此处查看：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/

Answer 2

我认为您正在寻找.prev()：

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

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

2 个答案: