使用jQuery Toggle更改div文本

Question

使用 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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">

<div class="open">Show</div>
<div class="showpanel">This is content</div>

<div class="open2">Show</div>
<div class="showpanel2">This is content</div>
</div>

http://jsfiddle.net/9EFNK/

- olo

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');                
        }        
    });       
});

- danwellman

---

很好地使用了回调函数来检查动画完成后的可见性，并相应地更改文本，这是这里最好的答案 :) - Mark Walters

Answer 2

只需添加一个简单的if语句来测试文本，如下所示

$('.open').click(function(){

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

就像这样演示

- Mark Walters

Answer 3

虽然这不是最优美的方法，但它可以在一条语句中完成工作。

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

- hjpotter92

Answer 4

使用 .toggle()

这里有一个演示实例

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

- Dipak

Answer 5

这是更新版本的链接：http://jsfiddle.net/9EFNK/1/。

你可以轻松地在关闭/打开时切换一个类，检查该类并相应地更改包含的文本。

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

$(this).toggleClass('active');

- Pantelis

Answer 6

请查看这个链接，也许可以解决用户的问题：Fiddle

- Man Programmer

---

+1 for $(this).html('Show'):$(this).html('close'); 我不知道。 - Dipak

如果 div 当前的 HTML 文本是关闭状态，那么它将会变为显示状态；反之亦然。'?' 是三元运算符。 - Man Programmer

Answer 7

使用这个。

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

Here is how you use it

 
   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();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button data-toggle="offcanvas" data-alt-text="Close">Open</button>

你甚至可以使用HTML，只需要确保它被正确编码即可。

- aWebDeveloper

Answer 8

请尝试此演示

$(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');
    });   
});​

- Pragnesh Chauhan