手风琴上有效和无效的标题

时间:2012-07-20 23:10:21

标签: jquery html

我已经让这个手风琴在堆栈溢出的用户帮助下自学了一些jQuery:http://jsfiddle.net/LQsV5/

我想知道如何添加更改标签的功能,所以当标签关闭时,标题的背景图片是灰色的,当手风琴打开时,它会像上面的例子一样停留吗? / p>

谢谢。

1 个答案:

答案 0 :(得分:2)

jsFiddle demo

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;}