jQuery仅在单击链接时显示特定的div动画

我必须以以下方式显示内容

Total Sales: 12345           Show Details                 

当有人单击“显示详细信息”（即标记）时，应显示另一个包含其他数据的div（显示详细信息应切换为隐藏详细信息，反转功能以隐藏div）

需要使用jQuery和一些动画（如果可能的话）来完成

我怎样才能做到这一点

感谢您的帮助

---

谢谢

让我们假设您的show details标签id为“abc”，detail div的id为“divDetail”，即display:none 所以代码如下

$（“#abc”）。单击（函数（此）{ this.text=“隐藏详细信息”； $（“#divDetail”）.toggle（）；

---

});

对于本例，链接“showDetails”和div“divDetails”的id

$('#showDetails').click(function(){
    if ($('#divDetails').is(":visible"){
        $('#divDetails').hide(250);
    } else {
        $('#divDetails').show(250);
    }
});

jQuery具有一些效果，包括show（）、hide（）、fadeIn（）、fadeOut（）、slideUp（）、slideDown（）和其他效果。有关更多示例，请参见。函数中的数量是完成所需的时间长度（毫秒）。您还可以指定一个字，而不是毫秒“慢”和“快”

其他需要注意的效果是切换效果，切换效果可以让你不必知道它当前是什么

$('#showDetails').click(function(){
    $('#divDetails').fadeToggle(250);
});

---

首先，您需要一个div来保存文档中最初设置的详细信息，并准备好：

 $(document).ready(function() {
       $('#myDetails').hide();
    });

然后下锚

 <a href="#" onclick="$('#myDetails').toggle();">Show Details</a>

编辑：对于动画，使用Timothy建议的代码，使用.is（“：visible”）

 <a href="#" onclick="$('#myDetails').toggle();">Show Details</a>

fadeIn('slow'); or fadeOut('slow');
slideUp('normal'); slideDown('fast');