jquery - 使用带有多个独立 div 的 jquery 显示/隐藏 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");  

prev 方法只找到前一个元素，因为这不是 .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 上一个（）