Question

我有两个<div>元素：

<div id="hidden"> 

<div id="hideitem">
<input id="item5" type="radio" class="item" name="item" value="gen"/>General Function
</div>

我将<div id="hidden">设置为display:none。我希望它在单击单选按钮时显示：

$("#item5").click(function() {
    $("#hidden").show();
}

但是如何在显示<div id="hideitem">后隐藏<div id="hidden">？

Answer 1

与大多数jQuery fx methods一样，.show()有一个可选参数，您可以在其中投放callback function。您在那里传递的函数在fx effect完成后执行。

$('#hidden').show('fast', function(){
   $('#hideitem').hide();
});

这将传递anonymous function作为参数，在效果之后调用。它只是隐藏了#hideitem对象。你会注意到我添加了一个额外的参数'fast'。这是jQuery用于执行淡出的持续时间（也可以是以ms为单位的数字）。这样使用它真的很有意义，因为否则，.show()只会将display属性设置为block。没有持续时间，我们没有延迟。因此，它的回调函数会立即被调用。

如果您想同时显示和隐藏这些元素，请同时调用

$('#hidden').show();
$('#hideitem').hide();

Answer 2

也许你可以这样做：

$("#item5").click(function(){

                         $("#hidden").show();
                         $("#hideitem").hide();
                         }

Answer 3

你应该能够隐藏它：

$("#item5").click(function(){
  $("#hidden").show();
  $("#hideitem").hide();
}

Answer 4

要使此功能保持切换div使用切换语句

$('#hidden').toggle('fast', function(){
   $('#hideitem').toggle();
});

显示一个<div>并隐藏另一个<div>

4 个答案: