使用带有多个独立div的jquery显示/隐藏div

我有一系列需要通过触发器显示/隐藏的多个独立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>

在隐藏功能中

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

prev方法只查找前一个元素，因为它不是。show\u options\u div，它找不到任何内容

.show\u options\u div是.toggleOptions的上一个元素，因此更改为

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

和

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

应改为

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

供参考