我正在修改一个网站,该网站有一个带有问题链接的常见问题解答图表。
如果单击问题链接,则会在下拉列表中显示答案。
我的目标是在链接的文本旁边交换一个带有减号的加号图标图像,以进行下拉显示操作。
常见问题解答使用Spry可折叠面板(sprycollapsiblepanel.js)通过链接管理显示/隐藏。在我去修改javascript源代码中的代码之前,我想知道是否有更容易的方法通过Dreamweaver进行操作,而有人可能会意识到这一点。
提前致谢。
更新:
调用显示/显示操作的html是:
<div class="CollapsiblePanel">
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="1">Fax to E-Mail</div>
<div class="CollapsiblePanelContent">Here is the text content as it relates to Fax to E-Mail</div>
</div>
</div>
为下拉菜单构造动作,Spry在页面底部需要以下内容:
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false});
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", {contentIsOpen:false});
</script>
最佳答案
在SpryCollapsiblePanel.css中,修改以下样式规则:
.CollapsiblePanelTab {
font: bold 0.7em sans-serif;
background-color: #DDD;
border-bottom: solid 1px #CCC;
margin: 0px;
padding: 2px 2px 2px 25px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
}
这会增加左侧的填充以为图像留出空间。
然后将图像添加到以下规则:
.CollapsiblePanelOpen .CollapsiblePanelTab {
background-color: #EEE;
background-image: url(images/plus.gif);
background-position:left top;
background-repeat: no-repeat;
}
.CollapsiblePanelClosed .CollapsiblePanelTab {
background-image: url(images/minus.jpg);
background-position:left top;
background-repeat: no-repeat;
/* background-color: #EFEFEF */
}