[英]Toggle Background Color for JQuery Accordion
I am having a little trouble implementing the same CSS Style that is used in one JavaScript Toggle Control to use in a different JQuery Accordion Control 我在实现与一个JavaScript Toggle控件中使用的同一CSS样式以在其他JQuery手风琴控件中使用时遇到一些麻烦
The Toggle Control- This is the Style that I need: http://jsfiddle.net/NinjaSk8ter/yXNmx/ 切换控件-这是我需要的样式: http : //jsfiddle.net/NinjaSk8ter/yXNmx/
The Accordion Control- This is the Accordion Control for which I need to apply the styling. 手风琴控件-这是我需要为其应用样式的手风琴控件。
Specifically: when you click on a Toggle Link you see that the grey header appears. 具体来说:单击“切换链接”时,您会看到灰色的标题出现。 For the Accordion Control that grey header always appears. 对于手风琴控件,总是出现灰色标题。 This should appear only when clicked as is the case with the Toggle Control. 仅当单击该按钮时,才应显示该按钮,例如“切换控件”。
The other Style that I need to replicate is the amount of spacing between each of the Questions. 我需要复制的另一种样式是每个问题之间的间距。 Would Padding suffice for the class that wraps the Anchor Tag? 用Padding满足包裹Anchor Tag的类是否足够? Whenever I add a Top-Margin for this class, there is Jitter in the Accordion. 每当我为此类添加顶级利润时,手风琴中就会出现抖动。
For the Accordion I have added the class="factterm" for the DT element which wraps the Anchor Tag. 对于手风琴,我为DT元素添加了class =“ factterm”,该元素包装了Anchor标签。
I added this to the 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;
}
Someone had previously mentioned that I need to add JavaScript to remove the bg class that has a background property which is setting the background color. 以前有人提到过,我需要添加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{ background-color: #ccc; }
在样式块中,删除dt背景样式: dt{ background-color: #ccc; }
dt{ background-color: #ccc; }
.active {background:#a9a9a9}
添加此类.active {background:#a9a9a9}
$(this).addClass('active').siblings().removeClass('active');
为了切换活动类,请将此行添加到点击函数$(this).addClass('active').siblings().removeClass('active');
You can view a working example here: http://jsfiddle.net/pratie/xGwpk/ 您可以在此处查看工作示例: http : //jsfiddle.net/pratie/xGwpk/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.