Изменить текст при нажатии ссылки с помощью jQuery

Question

Я бы хотел изменить кнопку, чтобы читать Close при нажатии, а также действовать как Закрыть.

Fiddle Demo

Как я могу добиться этого с моим текущим кодом?

JQuery:

$(document).ready(function() { 

    // Expand Panel 
    $("#open").click(function(){ 
     $("div#panel").slideDown("slow"); 
    });  

    // Switch visiblility of the "Close Panel" button 
    $("#close").click(function() { 
     $("div#panel").slideUp("slow"); 
    }); 

    }); 

Answer 1

Вы можете использовать .is(':visible'), чтобы проверить, отображается ли DIV и установить текст соответствующим образом.

код

$("#open").click(function() { 
    $("div#panel").slideToggle("slow", function() { 
     if ($("div#panel").is(':visible')) { 
      $("#open").text('Close'); 
     } else { 
      $("#open").text('Quick Quote'); 
     } 
    }); 
}); 

DEMO

Answer 2

Вы можете просто добиться этого с помощью .slideToggle():

$("#open").click(function(){ 
    if($("div#panel").is(':visible')) 
     $(this).html('Quick Quote'); 
    else 
     $(this).html('Close Quote'); 
    $("div#panel").slideToggle("slow"); 
}); 

Working Demo

Answer 3

Использование SlideToggle изящное решение.

Вы также можете использовать функциональность с помощью addClass и removeClass. Без внесения больших изменений в код, который вы написали.

http://jsfiddle.net/4dkoke6w/

Я создал класс «скрытый» и применяется «дисплей: нет» стиль.

// Expand Panel 
$("#open").click(function(){ 
    $("div#panel").slideDown("slow"); 
    $("#open").addClass("hidden"); 
    $("#close").removeClass("hidden"); 
});  

// Switch visiblility of the "Close Panel" button 
$("#close").click(function() { 
    $("div#panel").slideUp("slow"); 
    $("#close").addClass("hidden"); 
    $("#open").removeClass("hidden"); 
});