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（类打开），但是分别用类im隐藏每个div中的X（类关闭）。然后按V（打开类）将父div的高度更改为220px并显示X，但隐藏V。

所以我写了这个代码来做，但是当我按下X时，它显示BOTH 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的子节点，它是X的父节点（类.close）。

Answer 1

而不是：

// This code unhides ALL Vs because $('.open') selects ALL anchors with the class
$('.open').show('fast');} //unhide V

使用它：

// This code unhides only the V you want because it selects only one anchor:
// the one which is next to the clicked element $(this) in your HTML.
$(this).siblings('.open').show('fast');} //unhide V

应该对“取消隐藏X”行进行相同的更改。

Answer 2

由于X和V是兄弟姐妹，因此您可以使用恰当命名的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");
});

jQuery child＆gt; parent＆gt; child

2 个答案: