javascsript：在Dreamweaver中为spry可折叠面板添加加号/减号图标

我正在修改具有常见问题解答图表的网站，该图表有问题链接。
如果问题链接被点击，它会在下拉菜单中显示答案。javascsript：在Dreamweaver中为spry可折叠面板添加加号/减号图标

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

常见问题解答使用Spry Collapsible Panel（sprycollapsiblepanel.js）来管理显示/隐藏链接。在我开始修改javascript源代码中的代码之前，我想知道是否有人通过可能会意识到的Dreamweaver来实现此目的。

在此先感谢。

UPDATE：的HTML调用show /揭示的行动是：

     <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>

的下拉动作，轻快需要在页面底部以下的结构：

<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>

来源

2011-01-10 phill

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

这增加了左填充，以使房间的图像。一些简单的JavaScript

.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-10 14:43:04

插件插件在打开和关闭时为每个面板标题添加一个类别，因此这些是“CollapsiblePanelOpen”和“CollapsiblePanelClosed”。有了这个，你可以使用CSS来为背景图片添加+效果。

来源

2011-01-10 06:34:49 amosrivera

我试着相应地添加图像到CSS文件，它没有工作。还是）感谢你的建议。 – phill 2011-01-10 07:17:00

的onclick切换图像那么的onclick别的切换回+号

来源

2011-01-10 06:36:51 tekknolagi

如果它是一个形象，你不希望更改源代码，并且要使用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或功能或其他）。此外，图片的网址显然需要更新。

来源

2011-01-10 06:37:48 Ben

使用onclick，对不对？ – tekknolagi 2011-01-10 06:39:20

简单的解决办法：

然后将图像添加以下规则。

添加下面的脚本：

<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 =“名称（）;”到语法：

<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-07 19:55:18 Snapcount

javascsript：在Dreamweaver中为spry可折叠面板添加加号/减号图标

回答

相关问题