Изменить текст div с помощью JQuery Toggle

Когда используешь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/

Ответы на вопрос(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');
    });   
});​

Вот'обновленная версияhttp://jsfiddle.net/9EFNK/1/

Вы можете просто переключить класс при закрытии / открытии, выполнить проверку для этого класса и соответственно изменить содержащийся текст

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

$(this).toggleClass('active');
 olo18 окт. 2012 г., 09:51
хороший и аккуратный способ, легко понять, спасибо
Решение Вопроса

Вы можете использовать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');                
        }        
    });       
});
 Mark Walters18 окт. 2012 г., 09:43
Хорошее использование функции обратного вызова для проверки видимости после завершения анимации и соответствующего изменения текста. Это лучший ответ здесь :)

Просто добавьте простое выражение if, чтобы проверить текст следующим образом

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

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

Как этоDEMO

 olo18 окт. 2012 г., 09:43
работает как шарм, спасибо
 Dave Goosem17 февр. 2013 г., 05:49
Спасибо дружище, красиво и просто.
 user251903229 июн. 2017 г., 09:51
Лучший ответ! Благодарю.

Не самый красивый из методов, но он делает работу в одном выражении.

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

Использовать этот

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

Вы даже можете использовать HTML при условии, что это 's HTML закодирован правильно

Используйте .toggle ()

ВотРабочая Демо

$('.open').click(function(){    
        $('.showpanel').slideToggle('slow');                  
    }).toggle(function() {
            $(this).text('Hide');
        }, function() {
            $(this).text('Show');
        });
 olo18 окт. 2012 г., 09:44
о, я могу использовать этот способ! Спасибо :-)

проверить это может быть пользовательский вопрос решитьскрипка

 Dipak18 окт. 2012 г., 09:56
Спасибо за объяснение! :)
 Dipak18 окт. 2012 г., 09:45
+1 за $ (это) .html ('Шоу'): $ (это) .html (»близко'); Я не'не знаю, что
 Man Programmer18 окт. 2012 г., 09:51
это означает, что если текущий HTML-текст div близок, то он изменится на показ, а если это будет показ, то изменится на закрытие .. '?'  является троичным оператором

Ваш ответ на вопрос