点击字符变更

Question

以下是折叠菜单的HTML代码。我想写一个js来控制，当点击“目录1”“或“目录2”前面的符号可以变更，如果点击时是+号，则变成-号，如果点击时是-号，则变成+号，要怎么写这个js
<div id="main1" style="color:blue">
<a onclick="document.all.child1.style.display=(document.all.child1.style.display =='none')?'':'none'">+</a><a>目录1</a></div>
<div id="child1" style="display:none"> 
<a>- 子目录1</a><br>
<a>- 子目录2</a><br>
<a>- 子目录3</a><br>
<a>- 子目录4</a> 
</div> 
<div id="main2" style="color:green"> 
<a onclick="document.all.child2.style.display=(document.all.child2.style.display =='none')?'':'none'">+</a><a>目录2</a></div>
<div id="child2" style="display:none"> 
<a>- 子目录1</a><br> 
<a>- 子目录2</a><br>
<a>- 子目录3</a>
</div>

Answer 1

<div id="main1" style="color:blue">
<a onclick="document.all.child1.style.display=(document.all.child1.style.display =='none')?'':'none'">+</a><a>目录1</a></div>
<div id="child1" style="display:none">  
<a>- 子目录1</a><br>
<a>- 子目录2</a><br>
<a>- 子目录3</a><br>
<a>- 子目录4</a>  
</div>  
<div id="main2" style="color:green">  
<a onclick="document.all.child2.style.display=(document.all.child2.style.display =='none')?'':'none'">+</a><a>目录2</a></div>
<div id="child2" style="display:none">  
<a href="javascript:void(0);" onclick="oncl_child('sp1');"><span id="sp1">-</span> 子目录1</a><br>  
<a href="javascript:void(0);" onclick="oncl_child('sp2');><span id="sp2">-</span>- 子目录2</a><br>
<a href="javascript:void(0);" onclick="oncl_child('sp3');><span> id="sp3"-</span>- 子目录3</a>
<script>
function oncl_child(id){
if(document.getElementById(id).innerHTML == "-"){
document.getElementById(id).innerHTML = "+";
}else{
document.getElementById(id).innerHTML = "-";
}
}
</script>
</div>

Answer 2

<a onclick="document.all.child1.style.display=(document.all.child1.style.display =='none')?'':'none';this.innerHTML=='+'?this.innerHTML='-':this.innerHTML='+';">+</a><a>目录1</a></div>
在你的脚本后面加上：
this.innerHTML=='+'?this.innerHTML='-':this.innerHTML='+';

Answer 3

<a onclick="document.all.child1.style.display=(document.all.child1.style.display =='none')?'':'none';this.innerHTML = (document.all.child1.style.display =='none') ? '+' : '-'">+</a>