gpt4 book ai didi

javascript - JavaScript : adding plus/minus icon to spry collapsible panel in dreamweaver

转载 作者:行者123 更新时间:2023-11-28 02:47:10 26 4
gpt4 key购买 nike

我正在修改一个网站,该网站有一个常见问题解答图表,其中有一个问题链接。
如果单击问题链接,则会在下拉菜单中显示答案。

我的目标是将加号图标图像替换为链接文本旁边的减号图标,以实现下拉显示操作。

常见问题解答使用 Spry Collapsible Panel (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 */
}

关于javascript - JavaScript : adding plus/minus icon to spry collapsible panel in dreamweaver,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4644232/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com