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可摺疊面板添加加號/減號圖標

回答

相關問題