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

Question

我有一个页面，我想隐藏一些内容（#hidden_​​content）作为默认值。 在此页面上有一个CSS按钮，文本示例为“显示内容”。

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

按键

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

DIV

<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文档页面 ：您可以添加一个回调，该回调将在动画完成后执行

$('#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（）保持不变。）

洁的回答是伟大的，所以我用他的答案，并使用修改了它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 这里尝试一下。