使用带有 [+] 和 [-] 的 javascript 展开和折叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17268006/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Expand and collapse using javascript with [+] and [-]
提问by bhai
The following is the code i am using for expanding and collapsing my div. Now I want to make little changes to the code. When I Expand the div,A "[-]" with div content and when I collapse a "[+]" with div content should come.
以下是我用于展开和折叠 div 的代码。现在我想对代码做些小改动。当我展开 div 时，应该出现一个带有 div 内容的“[-]”，当我折叠带有 div 内容的“[+]”时，应该会出现。
<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>
I am Waiting Fotr your help.
我正在等待您的帮助。
Thanks In Advance
提前致谢
回答by leonhart
is this you want?
这是你想要的吗？
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';
}
}
回答by Rachit Doshi
use the show and hide functions of javascript to show and hide the divs:
使用javascript的显示和隐藏功能来显示和隐藏div：
<div id="showHide" class="open" style="display: block;" onclick="showHide();">
<!-- Your Contents -->
</div>
Javascript:
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';
}
}
回答by codetantrik
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 = '[+]';
}
}
When you click the [+] on the div this code shows the div and changes the [+] to [-] and vice versa. if you want to change the [+] to something else? like '[+]click here' you can just change the corresponding string in the code. I do not understand what do you mean by 'you want to change the content also..'. What exactly do you want to change?
当您单击 div 上的 [+] 时，此代码会显示 div 并将 [+] 更改为 [-]，反之亦然。如果您想将 [+] 更改为其他内容？像 '[+]click here' 你可以在代码中改变相应的字符串。我不明白您所说的“您也想更改内容......”是什么意思。你到底想改变什么？
