javascript - 使用 jquery 更改 anchor 文本和图标

Question

我有一个隐藏或显示 div 的 anchor 标记，但我无法更改它的文本和图标。

如何更改文本和图标标签，因为目前它将图标标签解析为常规文本。

anchor 标签:

<a class="collapse-info btn"><i class="icon-arrow-up icon-white"></i> Hide Info</a>

我需要该类在切换期间从“icon-arrow-up icon-white”变为“icon-arrow-down icon-white”并返回。

Javascript (jquery)

$('.collapse-info').toggle(function() {
$('.server-info').slideUp();
$(this).text('Show Info');
}, function () {
$('.server-info').slideDown();
$(this).text('Hide Info');
});

正在尝试类似 $("#collapse-icon").toggleClass('icon-arrow-down');但这不起作用，因为 anchor 文本在初始切换后被覆盖。

感谢您的帮助。

Answer 1

试试这个 - DEMO

$('.collapse-info').toggle(function() {
    //$('.server-info').slideUp();
    $(this).find("i").removeClass("icon-arrow-up").addClass("icon-arrow-down");
    this.childNodes[1].nodeValue = "Show Info";
}, function () {
    //$('.server-info').slideDown();
    $(this).find("i").removeClass("icon-arrow-down").addClass("icon-arrow-up");
    this.childNodes[1].nodeValue = "Hide Info";
});