Question

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

Total Sales: 12345           Show Details

当有人点击“显示详细信息”（即＆lt; a＆gt;标记）时，应显示另一个div，其中包含其他数据（并显示详细信息应切换以隐藏详细信息，撤消隐藏div的功能）

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

我怎样才能实现这个目标

帮助表示赞赏

由于

Answer 1

对于此示例，链接'showDetails'的id和div'divDetails'。

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

jQuery有一些效果，包括show（），hide（），fadeIn（），fadeOut（），slideUp（），slideDown（）等。有关更多示例，请参阅here。函数中的数量是以毫秒为单位完成所需的时间长度。您也可以指定一个单词而不是毫秒'慢'和'快'。

要注意的其他效果是切换它，以便您不必知道它当前是什么。

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

Answer 2

让我们假设你的节目详情标签id是“abc”，而detail div的id为“divDetail”，即display：none 所以代码如下

$（ “＃ABC”）。单击（功能（这）{ this.text =“隐藏细节”; $（ “＃divDetail”）切换（）。 }）;

Answer 3

$('a.showdetails').toogle(function(){
    $('.your-div').show();
},
function(){
    $('.yourdiv').hide();
});

Answer 4

首先，您需要一个div，其中包含最初在文档中设置的详细信息：

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

然后到锚

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

您可以使用动画代替toggle（）：

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

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

jQuery只在点击链接时显示特定的div动画

4 个答案: