2

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

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

锚标记：

<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'); 但这不起作用，因为锚文本在初始切换后被覆盖。

谢谢你的帮助。

4

2 回答 2

3

试试这个 -演示

$('.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";
});
于 2013-02-17T23:10:50.387 回答
0

首先，<i>标签用于斜体文本而不是图标。
现在回答您的问题，我假设您有某种背景图像分配给您<i>想要更改的标签。
为什么不将类分配给<a>标签本身，而不是 a 标签内的元素。那么更改 a 标签的 html 不会给您带来问题。
您的 js 将如下所示：

$('.collapse-info').toggle(function() {
  $('.server-info').slideUp();
  $(this).text('Show Info');
  $(this).addClass('icon-arrow-down').removeClass('icon-arrow-up');
}, function () {
  $('.server-info').slideDown();
  $(this).text('Hide Info');
  $(this).addClass('icon-arrow-up').removeClass('icon-arrow-down');
});
于 2013-02-17T22:59:27.930 回答