.slideToggle（）在一個DIV而不是所有其他同級

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

我認爲你正在尋找.prev()：

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

Answer 2

您可以針對項目相對於被點擊這樣的一個一個：

$(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/