Javascript 切换JQuery手风琴的背景色_Javascript_Jquery_Css

Javascript 切换JQuery手风琴的背景色

javascript jquery css

Javascript 切换JQuery手风琴的背景色,javascript,jquery,css,Javascript,Jquery,Css,我在实现一个JavaScript切换控件中使用的相同CSS样式以用于不同的JQuery Accordion控件时遇到了一些问题切换控件-这是我需要的样式：手风琴控件-这是我需要应用样式的手风琴控件特别是：当您单击切换链接时，您会看到灰色标题出现。对于手风琴控件，始终显示灰色标题。这应该只在单击时出现，就像切换控件一样我需要复制的另一种风格是每个问题之间的间距。对于封装锚标记的类，填充是否足够？每当我为这个类添加一个上边距时，手风琴中就会出现抖动 <body>

我在实现一个JavaScript切换控件中使用的相同CSS样式以用于不同的JQuery Accordion控件时遇到了一些问题

切换控件-这是我需要的样式：

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

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

我需要复制的另一种风格是每个问题之间的间距。对于封装锚标记的类，填充是否足够？每当我为这个类添加一个上边距时，手风琴中就会出现抖动

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

对于手风琴，我为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; 
}


答复1
答复2
.缩进框
{
填充物：5px；
}
.事实术语
{
/*边缘顶部：2倍*/
填充：2px5px0；
/*宽度：525px*/
}
#手风琴手柄
{     
宽度：260px；
高度：30px；
背景颜色：橙色；
} 
#手风琴节
{     
宽度：260px；
身高：445px；
背景色：#A9A9；
溢出：隐藏；
位置：相对位置；
}

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

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


dt{背景色：#ccc；}
dd{高度：100px；}

在样式块中删除dt背景样式：

dt{
背景色：#ccc；
}

添加此类

.active{background:#a9a9}

要切换活动类，请将此行添加到click函数

$（this）.addClass（'active'）.sides（）.removeClass（'active'）


您可以在此处查看一个工作示例：
您的答案似乎解决了背景色切换的样式问题。jsfiddle.net/Jv8Ta