使用jQuery與多個獨立div顯示/隱藏div

Question

我有一系列需要通過觸發器顯示/隱藏的多個獨立div。 到目前爲止，我有jQuery代碼將顯示div點擊，但隱藏部分不會工作。

這裏是我的jQuery：

$(".show_options_div").click(function() { 
    $(this).next(".toggleOptions").slideToggle("normal");   
    $(this).slideToggle("fast"); 
}); 

$(".hide_options_div").click(function() { 
    $(this).prev(".toggleOptions").slideToggle("normal");   
    $(this).prev(".show_options_div").slideToggle("fast");  
}); 

這裏是HTML：

<a class="show_options_div" style="display:block;"> 
    <div class="drop_down_arrow"></div> 
</a> 

<div class="toggleOptions" style="display: none">  
    <a class="hide_options_div"> 
    <div class="drop_up_arrow"></div> 
    </a> 
</div> 

<a class="show_options_div" style="display:block;"> 
    <div class="drop_down_arrow"></div> 
</a> 

<div class="toggleOptions" style="display: none"> 
    <a class="hide_options_div"> 
    <div class="drop_up_arrow"></div> 
    </a> 
</div> 


<a class="show_options_div" style="display:block;"> 
    <div class="drop_down_arrow"></div> 
</a> 

<div class="toggleOptions" style="display: none"> 
    <a class="hide_options_div"> 
    <div class="drop_up_arrow"></div> 
    </a> 
</div> 

Answer 1

在你的隱藏功能

$(this).prev(".show_options_div").slideToggle("fast"); 

的分組方法只能找到最接近的前元素，因爲這不是.show_options_div，這沒有找到任何東西

.show_options_div是.toggleOptions的分組元件，從而改變爲

$(this).parent(".toggleOptions").prev(".show_options_div").slideToggle("fast"); 

和

$(this).prev(".toggleOptions").slideToggle("normal");  

應改爲

$(this).parent(".toggleOptions").slideToggle("normal"); 

參考

jQuery prev()