Question

所以，基本上我正在尝试的是点击<a>锚标签之后我想改变它的背景。

示例：见下图

Arrow Image before expanding

点击此链接后，我正在生成（扩展）一个div标签，正好在其下方，并在其上显示政策。

我希望在展开/折叠时展开箭头转弯，如：

见下图：图片名称：(black_t_arrow.gif)

Arrow for policies after clicking on it

因此，当政策链接折叠时，它将显示图像向下箭头图像，而在点击“政策”链接后，它将显示反之亦然，它应该隐藏带有原始链接的向下箭头图像意味着它应该返回到先前的状态。

以下是我的CSS代码：

.expended_div{ float:left; width:100%; padding:10px 0}
.expended_div a{ color:#000; font-size:11px; text-decoration:underline; margin-left:15px; font-weight: bold; background-image: url("/common/images/black_t_arrow.gif");
                 background-position: 0 2px;
                 background-repeat: no-repeat; padding-left: 9px;}
.expended_div a:hover{ text-decoration:underline}
.expand_collapse{ float:left;  padding:10px 20px; }

以下是HTML代码：

<p class="expended_div open"><a href="#">Policies</a></p>
    <div class="expand_collapse" style="display:none;">
        <p><?php
      //some php code
    }
    ?></p>
    </div>

如何使用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');
    } 
});

OR：

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精灵的工作，如here所示。我的jsFiddle解决方案是here。

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

在DOM-ready功能中：

$(".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");
 });

为此，请更改＆＃34; black_t_arrow.gif＆＃34;看起来像这样：

arrow sprites

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

Answer 4

我不知道css但是如果你使用的是jquery ui框架，那么以下链接将帮助你

http://jqueryui.com/accordion/

你将不得不使用以下属性

$( "#accordion" ).accordion({ collapsible: true });

尝试以下代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />

<script>
$(function() {
$( "#accordion" ).accordion({ collapsible: true });
});
</script>

</head>
<body>
 <div id="accordion">

   <h3>Section 1</h3>
   <div>
   <p>Welcome</p>
   </div>

   <h3>Section 2</h3>
   <div>
   <p>Hi</p>
   </div>

   <h3>Section 3</h3>
   <div>
   <p>Hello</p>
   </div>

   <h3>Section 4</h3>
   <div>
   <p>How are you?</p>
   <p>Have a nice day.</p>
   </div>

</div>
</body>
</html>

请在http://api.jqueryui.com/accordion/

查看“Accordian”的文档

更改锚<a> tag after expanding it + CSS</a>的背景图片

4 个答案: