27

を使用する場合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/

4

8 に答える 8

44

アサーション メソッドを使用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');                
        }        
    });       
});
于 2012-10-18T07:36:54.580 に答える
15

単純な if ステートメントを追加して、テキストをテストするだけです

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

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

このデモのように

于 2012-10-18T07:33:01.053 に答える
10

最も美しいメソッドではありませんが、単一のステートメントでジョブを実行します。

$(this).text(($(this).text() == 'Close') ? 'Show' : 'Close');
于 2012-10-18T07:34:55.657 に答える
4

.toggle() を使用

ここにワーキングデモがあります

$('.open').click(function(){    
        $('.showpanel').slideToggle('slow');                  
    }).toggle(function() {
            $(this).text('Hide');
        }, function() {
            $(this).text('Show');
        });
于 2012-10-18T07:39:17.827 に答える
3

これがユーザーの質問である可能性があることを確認してくださいフィドルを解決する

于 2012-10-18T07:33:00.290 に答える
3

これが更新されたバージョンです http://jsfiddle.net/9EFNK/1/

閉じる/開くときにクラスを切り替えるだけで、そのクラスのチェックを実行し、それに応じて含まれるテキストを変更できます

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

$(this).toggleClass('active');
于 2012-10-18T07:33:11.920 に答える
1

このデモを試す

$(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');
    });   
});​
于 2012-10-18T07:36:41.507 に答える
1

これを使って

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();
    });
<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 が適切にエンコードされていれば、html を使用することもできます

于 2015-01-31T09:08:55.353 に答える