Question

我想先隐藏，然后在用户点击时隐藏，然后替换它。这是jquery代码：

<script>
$(document).ready(function(){
  $(".header-1").hide()(function(){
    $(".header-0").click(function(){
      $(".header-0").hide()(function(){   
        $(".header-1").show();
       });
    });
  });
});
</script>



<div class="header-0">Issued<br>Appts <span class="glyphicon glyphicon-play" style="font-size:9px;"></span></div>
<div class="header-1">Issued<br>Appts <span class="glyphicon glyphicon-backward" style="font-size:9px;"></span></div>

Answer 1

你的结构是错的。您几乎必须删除(function(){部分及其对应的结束括号和括号

这是正确的结构

$(document).ready(function(){
  $(".header-1").hide();
  $(".header-0").click(function(){
      $(".header-0").hide();
      $(".header-1").show();
  });
});

Demo

如果您想切换它们，请使用以下

$(document).ready(function(){
  $(".header-1").toggle();
  $(".header-0, .header-1").click(function(){
      $(".header-0").toggle();
      $(".header-1").toggle();
  });
});

Demo

Answer 2

你想要的是手风琴。查看本教程，了解如何操作：http://www.youtube.com/watch?v=uDD7Qn0-taI

您可以在此处找到代码：http://www.newthinktank.com/2011/03/jquery-video-tutorial-pt-6/

Answer 3

这称为交叉淡化。为了让它像预期的那样工作，你应该将两个div放在一个相对的父级中，使它们都是ABSOLUTE，top：0，left：0以便它们重叠。第一个是可见的，第二个是隐藏的，反之亦然。请注意，如果你想要“fadeIn（）fadeOut（）”，那么“绝对”的想法很有用。另外，对于简单的.hide（）和.show（），它几乎没有什么不同。

<div class="relative">
   <div class="absolute header-0">CONTENT</div>
   <div class="absolute header-1">CONTENT</div>
</div>

<script>
$(document).ready(function() {
   // Given the fact that they are both in the same div
   $('.relative').children('.absolute').click(function(e) {
      // Hides current div, shows the siblings
      $(this).hide().siblings('.absolute').show();
   });
});
</script>

最初隐藏div（在jquery中），然后单击另一个div，显示的div消失并被隐藏的div替换

3 个答案: