javascript - 扩展锚标签后更改背景图片+ CSS

Answer 1

我假设您有一个 javascript onclick（或类似的）来切换菜单项的样式以展开它。如果您在菜单项上有一个 ID，那么在触发的 JS 中，我将使用测试打开/关闭状态并根据需要覆盖或重置 CSS 项

document.getElementById("menuItem").style.backgroundImage = "url(black_t_arrow.gif)";

Answer 2

您需要两个 CSS 类，一个用于折叠，一个用于展开。

HTML：

<a id="expander" class="close" href="#">Click to collapse/expand</a>

CSS：

.close { background-image: url("/images/collapsed.gif"); }
.open { background-image: url("/images/expanded.gif"); }

JavaScript：

/* Useful for multiple CSS classes. */
$('a#expander').click(function(e){
    e.preventDefault();
    var exp = $(this);
    if (exp.hasClass('open')) {
        exp.removeClass('open').addClass('close');
    } else {
        exp.removeClass('close').addClass('open');
    } 
});

或者：

CSS：

a#expander { background-image: url("/images/collapsed.gif"); } /* set default image */ 
.open { background-images: url("/images/expanded.gif"); }

JavaScript：

/* Swap in/out the class open to override the default background. */
$('a#expander').toggleClass('open');

Answer 3

这似乎是 CSS sprites 的工作，如此处所述。我的 jsFiddle 解决方案在这里。

基本思想是创建一个包含两个箭头的图像。由于您将此图像用作背景，因此只会<a>显示填充标签内容的图像部分。要在一个图像和另一个图像之间切换，您需要做的就是更改 cssbackground-position属性。

在您的 DOM 就绪函数内部：

$(".expended_div a").on("click", function() {
   if(this.css("background-position") == "0px -8px")
    this.css("background-position", "0px -31px");
   else
    this.css("background-position", "0px -8px");
 });

为此，请将“black_t_arrow.gif”更改为如下所示：

很酷的一点是第二张图片没有加载时间。它已经存在，但由于背景图像大于内容区域而被隐藏。

Answer 4