Javascript javascsript：在dreamweaver中向spry可折叠面板添加加号/减号图标

我正在修改一个网站，该网站有一个FAQ图表，其中有一个问题链接。
如果单击“问题”链接，将在下拉列表中显示答案

我的目标是在链接文本旁边替换一个加号图标和一个减号图标，以便进行下拉显示操作

常见问题解答使用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>

var collapsablepanel1=new Spry.Widget.collapsablepanel（“collapsablepanel1”，{contentIsOpen:false}）；
var collapsablepanel2=new Spry.Widget.collapsablepanel（“collapsablepanel2”，{contentIsOpen:false}）；
var collapsablepanel3=new Spry.Widget.collapsablepanel（“collapsablepanel3”，{contentIsOpen:false}）；

插件在打开和关闭时向每个面板标题添加一个类，分别是“

可折叠面板打开”和“
可折叠面板关闭”
”。有了它，您可以使用CSS添加带有背景图像的+-效果。
插件在打开和关闭时为每个面板标题添加一个类，分别是“
collapsablepanelopen
”和“
collapsablepanelclosed
”。有了它，你可以使用CSS在背景图像中添加+-效果。
单击切换图像，然后单击其他内容，切换回+sign
单击切换图像，然后单击其他内容，切换回+sign
如果是图像，你不想更改源代码，你想使用javascript，您需要更改图像的
src
属性

// Grab the img object from the DOM
var img = document.getElementById("theImageId");

// If it's the plus pic, switch for minus, and vice versa.
if(img.src == "plus.png") {
  img.src = "minus.png";
}
else {
  img.src = "plus.png";
}

您可以将此代码放在任何需要的地方（在
onclick
或函数或任何地方）。此外，图像的URL显然需要更新。
如果它是图像，并且您不想更改源代码，并且希望使用javascript，则需要更改图像的
src
属性

// Grab the img object from the DOM
var img = document.getElementById("theImageId");

// If it's the plus pic, switch for minus, and vice versa.
if(img.src == "plus.png") {
  img.src = "minus.png";
}
else {
  img.src = "plus.png";
}

您可以将此代码放在任何需要的地方（在
onclick
或函数或任何地方）。此外，图像的URL显然需要更新。
在sprycollappiblePanel.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;
}

这会增加左侧的填充，为图像腾出空间

// Grab the img object from the DOM
var img = document.getElementById("theImageId");

// If it's the plus pic, switch for minus, and vice versa.
if(img.src == "plus.png") {
  img.src = "minus.png";
}
else {
  img.src = "plus.png";
}

然后将图像添加到以下规则中：

.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 */
}

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

这会增加左侧的填充，为图像腾出空间

// Grab the img object from the DOM
var img = document.getElementById("theImageId");

// If it's the plus pic, switch for minus, and vice versa.
if(img.src == "plus.png") {
  img.src = "minus.png";
}
else {
  img.src = "plus.png";
}

然后将图像添加到以下规则中：

.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轻松修复

添加以下脚本：

<script type="text/javascript">
<!--
   function name ()
{
    var img = document.getElementById("imgid");

    if (img.src == "plus.png") {
        img.src = "minus.png";
    }
    else {
        img.src = "plus.png";
    }
}
//-->
</script>



完成后，查看定义可折叠面板的div。它看起来像这样：

<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Name <img src="url.com/minus.png" id="imgid"></div>
  <div class="CollapsiblePanelContent">content</div>


名称
内容

您只需将onclick=“name（）；”添加到语法中即可：

<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0" onclick="name();">Name <img src="url.com/minus.png" id="imgid"></div>
  <div class="CollapsiblePanelContent">content</div>


名称
内容
使用一些简单的JavaScript轻松修复

添加以下脚本：

<script type="text/javascript">
<!--
   function name ()
{
    var img = document.getElementById("imgid");

    if (img.src == "plus.png") {
        img.src = "minus.png";
    }
    else {
        img.src = "plus.png";
    }
}
//-->
</script>



完成后，查看定义可折叠面板的div。它看起来像这样：

<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Name <img src="url.com/minus.png" id="imgid"></div>
  <div class="CollapsiblePanelContent">content</div>


名称
内容

您只需将onclick=“name（）；”添加到语法中即可：

<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0" onclick="name();">Name <img src="url.com/minus.png" id="imgid"></div>
  <div class="CollapsiblePanelContent">content</div>


名称
内容
phill说“如果点击了问题链接”，所以我认为是这样。但这取决于所使用的处理程序，这取决于设计者。phill说“如果点击了问题链接”，所以我认为是这样。但这取决于所使用的处理程序，这取决于设计师。我尝试将图像添加到css文件中，但没有成功。不过，谢谢你的建议。我试着将图像添加到css文件中，但没有效果。谢谢你的建议。