使用jQuery Toggle更改div文本

使用slideToggle ，如何更改文本关闭/显示？ 我做了一个简单的，但无法将文本更改回来。

这是我做的：

 $(document).ready(function(){ $('.open').click(function(){ $('.showpanel').slideToggle('slow'); $(this).text('close'); }); $('.open2').click(function(){ $('.showpanel2').slideToggle('slow'); $(this).text('close'); }); }); 

 body{ font-size:20px; } #box{ border:2px solid #000; width:500px; min-height:300px; } .open,.open2 { width:450px; height:50px; background:blue; margin:5px auto 0 auto; color:#fff; } .showpanel,.showpanel2{ width:450px; height:300px; margin:0 auto 10px auto; background:red; display:none; } 

  
 
Show
 
This is content
 
Show
 
This is content
  

http://jsfiddle.net/9EFNK/

Answer 1

您可以使用is()断言方法检查面板在动画的回调中是打开还是关闭，并相应地设置文本 – http://jsfiddle.net/9EFNK/7/

 $('.open').click(function(){ var link = $(this); $('.showpanel').slideToggle('slow', function() { if ($(this).is(':visible')) { link.text('close'); } else { link.text('open'); } }); }); 

Answer 2

只需添加一个简单的if语句来测试文本就像这样

 $('.open').click(function(){ $('.showpanel').slideToggle('slow'); if($(this).text() == 'close'){ $(this).text('Show'); } else { $(this).text('close'); } }); 

喜欢这个DEMO

Answer 3

不是最漂亮的方法，但它在单个语句中完成工作。

 $(this).text(($(this).text() == 'Close') ? 'Show' : 'Close'); 

Answer 4

这是一个更新版本http://jsfiddle.net/9EFNK/1/

您可以在关闭/打开时简单地切换类，对该类执行检查并相应地更改包含的文本

 if( $(this).hasClass('active') ) $(this).text('open'); else $(this).text('Show'); $(this).toggleClass('active'); 

Answer 5

使用.toggle（）

这是工作演示

 $('.open').click(function(){ $('.showpanel').slideToggle('slow'); }).toggle(function() { $(this).text('Hide'); }, function() { $(this).text('Show'); }); 

Answer 6

检查这可能是用户问题解决小提琴

Answer 7

试试这个演示

 $(document).ready(function(){ $('.open').toggle(function(){ $('.showpanel').slideToggle('slow'); $(this).text('close'); }, function(){ $('.showpanel').slideToggle('slow'); $(this).text('Show'); }); $('.open2').toggle(function(){ $('.showpanel2').slideToggle('slow'); $(this).text('close'); }, function(){ $('.showpanel2').slideToggle('slow'); $(this).text('Show'); }); });​ 

Answer 8

用这个

 jQuery.fn.toggleText = function() { var altText = this.data("alt-text"); if (altText) { this.data("alt-text", this.html()); this.html(altText); } }; 

这是你如何使用它

 jQuery.fn.toggleText = function() { var altText = this.data("alt-text"); if (altText) { this.data("alt-text", this.html()); this.html(altText); } }; $('[data-toggle="offcanvas"]').click(function () { $(this).toggleText(); }); 

  Open