切换 JQuery Accordion 的背景颜色答案

【问题标题】：Toggle Background Color for JQuery Accordion切换 JQuery Accordion 的背景颜色
【发布时间】：2011-03-15 14:57:35
【问题描述】：

我在实现一个 JavaScript 切换控件中使用的相同 CSS 样式以在不同的 JQuery 手风琴控件中使用时遇到了一点麻烦

切换控件-这是我需要的样式：http://jsfiddle.net/NinjaSk8ter/yXNmx/

手风琴控件- 这是我需要为其应用样式的手风琴控件。

特别是：当您单击切换链接时，您会看到灰色标题出现。对于 Accordion Control，灰色标题始终出现。这应该只在单击时才会出现，就像切换控件一样。

我需要复制的另一种样式是每个问题之间的间距量。填充锚标记的类是否足够？每当我为此类添加 Top-Margin 时，Accordion 中就会出现 Jitter。

对于 Accordion，我为包装 Anchor 标签的 DT 元素添加了 class="factterm"。

我将它添加到手风琴中。

    <body>
    <div id="galColumn">
        <div class="contentbox">
            <dl> 
                <dt class="factterm">
                <a id="A1" href="javascript://" class="questionLink">Question1</a>
                </dt> 
                <dd id="1" class="answer">
                    <div class="indent-box">
                        Answer1
                    </div>
                </dd> 
                <dt class="factterm">
                <a id="A2" href="javascript://" class="questionLink">
                    Question2</a>                    
                </dt> 
                <dd id="2" class="answer">
                    <div class="indent-box">
                        Answer2
                    </div>
                </dd> 
            </d1>
        </div>
    </div>
    </body>

.indent-box 
{
padding: 5px;
}
.factterm 
{
/*margin-top: 2px;*/
padding: 2px 5px 0;
/*width: 525px;*/
}
#accordion .handle
{     
width: 260px;     
height: 30px;     
background-color: orange; 
} 
#accordion .section
{     
width: 260px;     
height: 445px;     
background-color: #a9a9a9;    
overflow: hidden;     
position: relative; 
}

之前有人提到我需要添加 JavaScript 来删除具有设置背景颜色的背景属性的 bg 类。

<html>
<head>
    <title></title>
    <style type="text/css" media="screen">
        dt{ background-color: #ccc; } 
        dd { height: 100px; } 
    </style>
</head>
<body></body>
</html>

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

在样式块中删除 dt 背景样式：dt{ background-color: #ccc; }
添加此类.active {background:#a9a9a9}
为了切换活动类，将此行添加到您的点击函数$(this).addClass('active').siblings().removeClass('active');

您可以在此处查看工作示例：http://jsfiddle.net/pratie/xGwpk/

【讨论】：

您的答案似乎解决了切换背景颜色的样式问题。 jsfiddle.net/Jv8Ta