代码之家 › 专栏 › 技术社区 › Brad

将链接上的背景图像设置为显示在文本链接的右侧

css html

Brad · 技术社区 · 16 年前

我使用toggleClass和slideToggle来完成以下操作:

当用户选择一个链接时,它会滑下div,然后它会将链接设置为open,显示相应的背景图像,这只是一个简单的,(+)和(-)来打开和关闭div。

我遇到的问题是,在链接的右边显示背景图像,给它留下大约5-10px的边距,给它一些间距。

下面是它正在执行的操作的屏幕截图:关闭(显示(+)符号): http://cl.ly/4634afa1e7aa4fe10072

打开(显示(-)符号): http://cl.ly/8bc59ab07da46a173d62

链接的HTML: <a href="#" class="our-future-intro-slide">Mapping Our Future: Strategic Plan 2010-2015</a>

CSS,用于显示未触及的链接时以及选中链接后:

// link is not open
.our-future-intro-slide {
    background: url('/images/uploads/images/plus_sign.png') no-repeat 120% 0%;
}

// link is open
.our-future-intro-slide-open {
    background: url('/images/uploads/images/plus-icon.png') no-repeat 120% 0%;
}

$(document).ready(function() {
 $('.our-future-intro-slide').click(function() {
  $(this).toggleClass("our-future-intro-slide-open");
  $(".our-future-intro").slideToggle(100);
 });
});

3 回复 | 直到 16 年前

Ryan Kinal 16 年前

.our-future-intro-slide {
    background: url('/images/uploads/images/plus_sign.png') no-repeat top right;
    padding-right: 30px; /* or whatever the width of the background image is */
}

当然,对另一条规则也做了同样的修改。