使用jQuery Toggle更改div文本 [英] Change div text with jQuery Toggle

问题描述

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

When using slideToggle, how to change the Text close/show? I did a simple one, but cannot get the text change back.

这是我做的：

$(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/

推荐答案

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

You can use the is() assertion method to check whether the panel is open or closed in the animation's callback and set the text accordingly - 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');                
        }        
    });       
});

这篇关于使用jQuery Toggle更改div文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！