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的prev元素，因此更改为

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

和

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

应改为

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

供参考

jQuery prev()

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

1 个答案: