使用javascript與[+]和[ - ]展開和摺疊

以下是我用於展開和摺疊div的代碼。現在我想對代碼做一點改動。當我展開div時，帶有div內容的「[ - ]」以及當我用div內容摺疊「[+]」時應該出現。使用javascript與[+]和[ - ]展開和摺疊

<style type="text/css"> 
.gap 
{ 

border:1px solid black 

} 
</style> 

<script type="text/javascript"> 

    function toggle_visibility(id) { 
     var e =document.getElementById(id); 

     if(e.style.display == 'none') 
     { 
      e.style.display = 'block'; 
      col.innerHTML=valu; 
     } 
     else 
     { 
      e.style.display = 'none'; 

     } 
    } 

    function edit(id,item) 
    { 
     var e = document.getElementById(id); 
     var f = document.getElementById(item); 

    document.getElementById('id4').innerHTML=e.innerHTML;  
     e.innerHTML=f.innerHTML; 
     window.location=window.location; 

    } 
    function cancel(id,item) 
    { 

     document.getElementById(id).innerHTML=document.getElementById(item).innerHTML; 
    } 

</script> 

<div class="gap" ><a href="#" onclick="toggle_visibility('id1');" id="x">[+]<div id="click" style="float:right;">Click here</div></a></div> 

<div id="id1" style="display:none;">This is foo</div> 


<a href="#" onclick="toggle_visibility('id2');" ><div class="gap">click here1</div></a> 

<div id="id2" style="display:none;">click here1 
<div> <a href="#" onclick="edit('id2','id3');">Edit</a></div> 
</div> 




<div id="id3" style="display:none;">Edit 
<div> <a href="#" onclick="cancel('id2','id4')">cancel</a></div> 
</div> 


<div id="id4" style="display:none;"></div>

我正在等待您的幫助。

在此先感謝

來源

2013-06-24 bhai

製作提琴.. !!! –

我不明白這個問題。你是說當你試圖做出這些改變時，你會遇到某種錯誤？如果是這樣 - 錯誤是什麼？或者你是否說過你沒有試圖做出這些改變，並且希望這裏的某個人能夠優雅地爲你做出這些改變？要麼。。。？ – ruakh

請將您提到的工作代碼放在您的問題中，以便人們可以查看它，告訴您如何添加[+]和[ - ]符號。 – Gimmy

這是你想要的嗎？

function toggle_visibility(id) { 
    var e =document.getElementById(id); 
    var label = document.getElementById("x"); 

    if(e.style.display == 'none') 
    { 
     label.innerHTML = label.innerHTML.replace("[+]","[-]"); 
     e.style.display = 'block'; 
     col.innerHTML=valu; 
    } 
    else 
    { 
     label.innerHTML = label.innerHTML.replace("[-]","[+]"); 
     e.style.display = 'none'; 

    } 
}

來源

2013-06-24 04:43:04 leonhart

@ leonhart ..這將只工作一個div ..我使用不同名稱的幾個div .. – bhai

@bhai好吧，檢查更新。 – leonhart

@leonhart ...我需要顯示的內容以及..像[+]點擊這裏... [+]點擊here1 etc ..我mam使用幾個div。 – bhai

使用的顯示和隱藏的JavaScript函數來顯示和隱藏的div：

<div id="showHide" class="open" style="display: block;" onclick="showHide();"> 
    <!-- Your Contents --> 
</div>

的Javascript：

function showHide(currentElem) { 
    if (currentElem.ClassName.indexOf('open') > -1) { 
     // This means its open, now close it 
     currentElem.className = 'closed'; 
     currentElem.style.display = 'none'; 
    } else { 
     currentElem.className = 'open'; 
     currentElem.style.display = 'block'; 
    } 
}

來源

2013-06-24 04:37:24

@ ruakh..You是正確的..我已經嘗試，但我還沒有成功..請讓我知道代碼做到這一點.. – bhai

function toggle_visibility(id) { 
    var e = document.getElementById(id); 

    if (e.style.display == 'none') { 
     document.getElementById('x').innerText = '[-]'; 
     e.style.display = 'block'; 
     //col.innerHTML = valu; 
    } 
    else { 
     e.style.display = 'none'; 
     document.getElementById('x').innerText = '[+]'; 
    } 
}

當您單擊[ +]這個代碼顯示div並將[+]更改爲[ - ]，反之亦然。如果你想改變[+]其他的東西？像'[+]點擊這裏'，你可以改變代碼中的相應字符串。我不明白'你也想改變內容'是什麼意思。「你想要改變什麼？

來源

2013-06-24 04:40:01 codetantrik

'innerText'在Firefox中不起作用。另外，'textContent'在IE中不起作用。 –

我想操作可以用innerHTML替換innerText，而不犧牲這裏的功能 – codetantrik

@ codetantrik ..這一個我已經嘗試過，並會工作..但我需要顯示的內容以及...像[+]點擊這裏... [ +]點擊這裏1等..我mam使用幾個div .. – bhai

使用javascript與[+]和[ - ]展開和摺疊

回答

相關問題