1

在堆栈溢出的用户的帮助下，我制作了这个手风琴来教自己一些 jQuery：http: //jsfiddle.net/LQsV5/

我想知道如何添加该功能以更改选项卡，因此，当关闭标签时，标题的背景图是灰色的，当手风琴打开时，它会像上面的示例中保持一样吗？

谢谢你。

4

1 回答 1

2

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

.selected比用 jQuery切换这个类：

$('.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;}
于 2012-07-20T23:25:57.867 回答