javascript - 使用 jQuery 切换单个 Div 层

Question

在运行时，我有一个循环，它根据数据库中的数量创建多个具有相同类的 div。

<div class="show">....</div> 
<div class="show">....</div>  
<div class="show">....</div>  

我想使用 jQuery 的 slideToggle() 函数来显示这个 div。对于其中的每一个，我都有一个单独的超链接，单击该超链接时应显示 div。在超链接和我想要切换的 div 之间还有许多标签。

<div>
<div>
<a href="#" class="display">View</a>  

</div>
    <br />
    </div>
    <div>
        <div class="clear"></div>
      </div>


<div class="show">....</div>

<div>
<div>    
<a href="#" class="display">View</a>  
</div>
    <br />
    </div>
    <div>
        <div class="clear"></div>
      </div>



<div class="show">....</div> 

<div>
<div>
<a href="#" class="display">View</a>  

</div>
    <br />
    </div>
    <div>
        <div class="clear"></div>
      </div>


<div class="show">....</div>   

$(function () {    
     $(".display").click(function(){    
         $(".show").slideToggle();    
         return false;     
      });  
});

自然地，当它被调用时，每个 div 层都会被切换，无论单击哪个超链接。我只想切换最接近给定超链接的 div。

提前致谢。

Answer 1

找到 <div>相对地从this使用 tree traversal functions ，像这样:

$(function () {
  $(".display").click(function () {
    $(this).next().slideToggle();
    return false;
  });
});

在这种情况下，因为它是我们关心的下一个兄弟元素，所以使用 .next() ，如果结构与问题不同，你需要相应地调整它，从<a>中获取你点击了 ( this ) 到 <div>你想切换。