单击按钮时显示隐藏的 div（幻灯片）（更改文本）答案

【问题标题】：Show hidden div (slide) when click on button (change text)单击按钮时显示隐藏的 div（幻灯片）（更改文本）
【发布时间】：2012-12-17 01:21:28
【问题描述】：

我有一个页面，我想默认隐藏一些内容 (#hidden_content)。此页面上有一个带有文本示例“显示内容”的 CSS 按钮。

单击此按钮时，我希望 div #hidden_content 以幻灯片效果显示，同时按钮“显示内容”上的文本将更改为示例“隐藏内容”，单击时内容将再次隐藏.

按钮

<a href="" id="button" class="button_style">Show content</a>

分区

<div id="hidden_content">Content</div>

幻灯片脚本

$(document).ready(function(){
  $("#button").click(function(){
    $("#hidden_content").slideToggle("slow");
  });
});

现在我想要按钮上的文本，以便在单击时更改。我该怎么做？

谢谢。

【问题讨论】：

您可以使用 Google 在大约 5 分钟内完成这项工作。

标签： javascript jquery

【解决方案1】：

jQuery 有一个text() 函数：

$("#button").text("change");

你可以在你的函数中使用它：

$(document).ready(function(){
    $("#button").click(function(){
        $("#hidden_content").slideToggle("slow");
        $("#button").text("change");
    });
});

您可以根据内容是否隐藏：

$("#button").text($("#hidden_content").is(":hidden")?"Show content":"Hide content");

确保在切换内容后使用它。

【讨论】：

【解决方案2】：

试试这个：http://jsfiddle.net/dRpWv/1/

$(document).ready(function() {
  $("#button").toggle(function() {
    $(this).text('Hide Content');
  }, function() {
    $(this).text('show Content');
  }).click(function(){
      $("#hidden_content").slideToggle("slow");
  });
});

【讨论】：

效果很好，谢谢！如果我想停用滑动功能，您知道要编辑什么吗？
要么注释掉点击函数中的slideToggle，要么删除这个.click(function(){ $("#hidden_content").slideToggle("slow") ; });
因为它不“适合”内容在此处放置幻灯片。
那么您的意思是简单的show()/hide() 或fadeIn()/fadeOut() 函数。
.fadeToggle("slow"); 将是另一种选择。如果你考虑的话。

【解决方案3】：

来自slideToggle doc page：你可以添加一个回调，一旦动画完成就会执行

$('#hidden_content').sliddeToggle('slow', function(){
  if( $('#hidden_content').is(':hidden') ){
    $('#button').text('Show content');
  } else {
    $('#button').text('Hide content');
  }
})

【讨论】：

【解决方案4】：

根据 w3schools 的说法，事件方法toggle() 在 1.9 版本之后被移除。（注意：这是事件方法 toggle()，不是效果方法 toggle()。效果方法toggle()保持不变。）

Jai's answer 很棒，所以我使用了他的答案，并使用if 和else 而不是toggle() 对其进行了修改。

$(document).ready(function() {
    $(".button").click(function(){
        if($(this).text() == 'Show Content')
            $(this).text('Hide Content');
        else
            $(this).text('Show Content');
        $("#hidden_content").slideToggle("slow");
    });
});

在 JSFiddle 上试试 Here。

【讨论】：