1
4

4 回答 4

2

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

document.getElementById("menuItem").style.backgroundImage = "url(black_t_arrow.gif)";
于 2013-01-23T05:24:38.577 回答
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');
于 2013-01-23T05:40:43.540 回答
2

这似乎是 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”更改为如下所示：

箭头精灵

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

于 2013-01-23T06:00:05.527 回答
1
于 2013-01-23T05:10:34.000 回答