jQuery 子>父>子

Question

我有这个 html 代码:

<div class="im">
<div style="height:220px">HELLO WORLD!
<a class="close">X</a>
<a class="open" style="display:none;">V</a>
</div>
</div>

<div class="im">
<div style="height:220px">HELLO WORLD!
<a class="close">X</a>
<a class="open" style="display:none;">V</a>
</div>
</div>

我想按 X(类关闭)将父 div 的高度更改为 20px 并显示 V(类打开)，但在每个 div 中分别隐藏 X(类关闭)和类 im。然后按 V(类打开)将父 div 的高度更改为 220px 并显示 X，但隐藏 V。

所以我写了这段代码来做到这一点，但是当我按下 X 时，它显示了两个 V(类打开)，但我只想显示其中一个，它在父级的 div 中:

$('.close').click(function(){ // click X makes
  $(this).parent().css('height','20px'); // parent div's height = 20px
  $(this).hide('fast'); //hide X
  $('.open').show('fast');} //unhide V
);
$('.open').click(function() {
  $(this).parent().css('height','220px');} // change height of parent div to 220px
  $(this).hide('fast'); //hide V
  $('.close').show('fast');} //unhide X
);

我怎样才能隐藏和显示 V 中的一个，它是父 div 的子级，而父级 div 是 X(类 .close)的父级。

Answer 1

由于 X 和 V 是 sibling ，您可以使用恰当命名的 siblings()方法:

$(".close").click(function() {
    $(this).parent().css("height", "20px")
           .end().hide("fast")
           .siblings(".open").show("fast");
});

$(".open").click(function() {
    $(this).parent().css("height", "220px")
           .end().hide("fast")
           .siblings(".close").show("fast");
});