Как сделать кнопку «Закрыть меню»?

Question

[Toster777]

Имеется такой код для открывающегося меню:

$('div.menu').prepend('<div id="menu-icon">Открыть меню</div>');
    $("#menu-icon").on("click", function(){
    $("ul.menu").fadeToggle();
 });

Как сделать так, чтобы кнопка "menu-icon" при открытии меню сменялась на "Закрыть меню"?

Answer 1

[Владимир Проскурин]

$('div.menu').prepend('<div id="menu-icon">Открыть меню</div>');
    
    $("#menu-icon").on("click", function(){
    $("ul.menu").fadeToggle();
     
     $("ul.menu").toggleClass("expanded");
     if ($("ul.menu").hasClass("expanded")) {
        $("ul.menu").html("Закрыть меню");
     } else {
        $("ul.menu").html("Открыть меню");
     }
 });

Ну и поменяйте местами тексты если будет отображаться наоборот.
UPD: Поменял немного код, вместо $this поставил $("ul.menu").

Answer 2

[Дмитрий]

Добрый день.

$("#menu-icon").on("click", function(){
    $("ul.menu").fadeToggle();
    $(this).text('Закрыть меню.')
 });

Answer 3

[levchak0910]

let open = "Открыть меню";
let close = "Закрыть меню";
$('div.menu').prepend(`<div id="menu-icon">${open}</div>`);
$("#menu-icon").on("click", function() {
    $("ul.menu").fadeToggle();
    $(this).text((i, text) => text == open ? close : open);
});

Answer 4

[Антон Голубков]

.toggleClass()
Менять кнопке класс как вариант по клику, как вариант