一格出现在点击上，第二格关闭

Question

我知道单击简单的Java脚本功能

  $(document).ready(function(){
  $(".click").click(function(){
    $(".fade", this).fadeToggle();
  });
});

但我希望在单击时出现一个div，第二个div关闭。 就像这个页面http://www.wpbeginner.com/free-wordpress-blog-setup/一样 ，但是在查看源代码时我找不到任何代码。 不用担心，此链接不属于我或我的网站

Answer 1

假设您的html看起来像这样：

<a class="click">click</a><br />
<a class="fade1">fade1</a><br />
<a class="fade2">fade2</a><br />

确保默认情况下，您要在点击时显示的内容是隐藏的：

.fade2 { display:none }

然后在jQuery中执行以下操作：

$(document).ready(function(){
  $(".click").click(function(){
    $(".fade1, .fade2").fadeToggle();
  });
});

这是一个小提琴演示

Answer 2

我认为应该这样做

$(document).ready(function(){
    $('.click').click(function(){
        if ($('.first').is(':visible')) {
            $('.first').css('display', 'none');
            $('.second').fadeIn(2000);
        } else {
            $('.second').css('display', 'none');
            $('.first').fadeIn(2000);
        }
    });                  
});

http://jsfiddle.net/57VaZ/