使用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()