1

我正在修改一个网站，该网站有一个带有问题链接的常见问题解答图表。
如果单击问题链接，它会在下拉列表中显示答案。

我的目标是用链接文本旁边的减号图标替换加号图标图像，以进行下拉显示操作。

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

5 回答 5

1

在 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 */
}
于 2011-01-10T14:43:04.423 回答
0

插件在打开和关闭时为每个面板标题添加一个类，分别是“ CollapsiblePanelOpen”和“ CollapsiblePanelClosed”。有了它，您可以使用 CSS 来添加带有背景图像的 +- 效果。

于 2011-01-10T06:34:49.163 回答
0

onclick 切换图像然后 onclick 其他东西切换回 + 符号

于 2011-01-10T06:36:51.093 回答
0

如果它是一个图像，并且您不想更改源代码，并且想使用 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 显然需要更新。

于 2011-01-10T06:37:48.433 回答
0

使用一些简单的 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>
于 2011-02-07T19:55:18.883 回答