Question

html是

<a class="minimize" href="#targetElem" >Min</a>
<div id="targetElem">
<p class="handler"></p>
  <div class="content">
  content area
  </div>
</div>

javascript是以下代码

$(document).ready(function(){ 
    $('a.minimize').click(function() {
      $($(this).attr('href')).siblings(".content").slideToggle("slow");
    });
});

我想要的是当点击一个href类最小化时，href（#targetElem）的目标没有变化，但选择#targetElem兄弟（div class =“content”）动画，bcos我想用它们一遍又一遍，我不想在.js文件中添加大量代码，如下面的代码：

$(document).ready(function(){ 
    $('a.minimize').click(function() {
    $('#targetElem').siblings(".content").slideToggle("slow");
    });
    $('a.minimize1').click(function() {  
    $('#targetElem1').siblings(".content").slideToggle("slow");
    });  
    $('a.minimize2').click(function() {    
    $('#targetElem2').siblings(".content").slideToggle("slow");
    });  
    $('a.minimize3').click(function() {    
    $('#targetElem3').siblings(".content").slideToggle("slow");
    });  

});

所以我怎么能这样做？

Answer 1

你做对了，除了.content不是targetElem的兄弟，而是一个孩子：

$(document).ready(function(){ 
    $('a.minimize').click(function() {
      $($(this).attr('href')).children(".content").slideToggle("slow");
    });
});

Answer 2

兄弟姐妹是同一级别的所有元素（兄弟），孩子们都是不同元素中的所有元素，但只有一个级别的深度（直接孩子）。

如果你想要查看元素的所有层次结构，你需要找到方法

选择#targetElem兄弟（div class =“content”）animate

2 个答案: