1

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

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

谢谢。

4

4 回答 4

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");
  });
});
于 2013-01-02T17:11:19.097 回答
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");

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

于 2013-01-02T17:06:05.683 回答
0

从slideToggle 文档页面：您可以添加一个回调，该回调将在动画完成后执行

$('#hidden_content').sliddeToggle('slow', function(){
  if( $('#hidden_content').is(':hidden') ){
    $('#button').text('Show content');
  } else {
    $('#button').text('Hide content');
  }
})
于 2013-01-02T17:12:12.530 回答
0

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

Jai 的答案很棒，所以我使用了他的答案并使用ifandelse而不是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上尝试一下。

于 2015-03-24T12:17:30.210 回答