Question

我有一个页面，我想隐藏一些内容（#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");
  });
});

现在我希望按钮上的文字在点击时更改。我该怎么做？

感谢。

Answer 1

试试这个：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");
  });
});

Answer 2

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");

确保在内容切换后使用此功能。

Answer 3

来自slideToggle doc page：您可以添加一个动画完成后将执行的回调

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

Answer 4

根据w3schools，在1.9版之后删除了事件方法toggle()。（注意：这是事件方法 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上尝试。

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

4 个答案: