我制作了这个手风琴,在堆栈溢出用户的帮助下自学一些jQuery:http://jsfiddle.net/LQsV5/
我想知道如何添加该功能来更改选项卡,这样当选项卡关闭时,标题的背景图片是灰色的,当手风琴打开时,它会像上面的例子一样保持不变?
谢谢。
jsFiddle演示
CSS(创建一个".selected"类并设置所需的背景):
#acc h3 {padding-left:5px; padding-top: 2px; font-weight:bold; margin-top:5px; color:#fff; font-size:11px;
background: #777; /* HERE SET YOUR GRAY IMAGE */
}
#acc h3.selected{
background:url("http://img.uefa.com/imgml/comp/u19/sprite_4-6-8.png") no-repeat scroll 0pt -50px transparent;
}
然后用jQuery:切换这个.selected
类
$('.acc li h3').next('.acc-section').hide(); // remove that line if you hide them inside your CSS
$('.acc li h3').click(function() {
var el = $(this).next('.acc-section');
$('.acc li h3').removeClass('selected');
check = (el.is(':visible')) ? el.slideUp() : ($('.acc-section').slideUp()) (el.slideDown().prev('h3').addClass('selected'));
});
请注意,在我使用的jQuery内部:$('.acc li h3').next('.acc-section').hide();
如果你不想看到你的滑块在整个页面加载之前默认打开,并看到它隐藏,请删除该行并在你的CSS:中设置
.acc-section{display:hidden;}