jquery - 是否可以在此手风琴 jquery 插件上动态更改某些 html 内容？

Question

http://bassistance.de/jquery-plugins/jquery-plugin-accordion/

http://jquery.bassistance.de/accordion/demo/

有点像第三个例子，除了“图标”不应该是图像，而是文本字符。当我选择此选项时，我希望将这个标题：“+吉他”更改为“-吉他”。我的 html 应该是这样的：

<a><span>+<span> guitar</a>

至

<a><span>-<span> guitar</a>

关于如何做到这一点的任何想法？

Answer 1

免责声明：我只是快速浏览了链接的示例，以下可能不适用于 jquery 手风琴，它是基于链接的 javascript 库的组件。

您看到的图像是通过 CSS 设置的，实际上是该元素的背景图像：

 #navigation a.head (all closed "tabs")

和

 #navigation a.selected (the one currently expanded).

所以你基本上有两个选择：

• 创建类似于 '-' 和 '+' 的图像，这可能是最简单的 hack
• 使用 jQuery 的 .html 来处理这些选择器，并通过使用 '+' 更改预定义的字符串 '-'，反之亦然

Answer 2

您需要从 css 中删除图像并将 :before 选择器与内容元素一起使用。

改变

#navigation a.head {
    cursor:pointer;
    border:1px solid #CCCCCC;
    background:#5263AB url(collapsed.gif) no-repeat scroll 3px 4px;
    color:#FFFFFF;
    display:block;
    font-weight:bold;
    margin:0px;
    padding:0px;
    text-indent:14px;
    text-decoration: none;
}

#navigation a.selected {
    background-image: url(expanded.gif);
}

至

#navigation a.head {
    cursor:pointer;
    border:1px solid #CCCCCC;
    background:#5263AB;
    color:#FFFFFF;
    display:block;
    font-weight:bold;
    margin:0px;
    padding:0px;
    text-indent:14px;
    text-decoration: none;
}

#navigation a.head:before {
    content: '+';
}

#navigation a.selected:before {
    content: '-';
}