Question

js！如何使折叠菜单只显示标题？

<script>
function switchMenu(evt){
var ele=evt.target||evt.srcElement; //分别针对非ie和ie，获取事件的源对象
if(ele.tagName=="H1"){ //如果是<h1>
var ulu=ele.parentNode.getElementsByTagName("ul");
for(var i=0;i<ulu.length;i++)
{
ulu[i].style.display="none";
}
do{
ele=ele.nextSibling; //反复取下一个兄弟节点，直到节点为<ul>或为null
}while(ele&&ele.tagName!="UL");
if(ele){
var display=evt.target?getComputedStyle(ele,null).display:
ele.currentStyle.display; //分别针对非ie和ie，获取<ul>的当前css属性display
ele.style.display=display=="none"?"":"none"; //切换
}
}
}
</script>
<div onclick="switchMenu(event)">
<h1>标题111</h1>
<ul>
<li>AAAAA</li>
<li>AAAAA</li>
</ul>
<h1>标题222</h1>
<ul>
<li>BBBBB</li>
<li>BBBBB</li>
</ul>
<h1>标题333</h1>
<ul>
<li>CCCCC</li>
<li>CCCCC</li>
</ul>
</div>
这是代码，我希望做到的效果是当点开这个网页的时候只显示标题，点某一标题时再显示如内容。而不是点开以后显示全部的内容。该如何做？

Answer 1

将每个<ul>改为<ul style="display:none">

追问

您好我能不能再问一下，为什么我这么写里的文字显示不出来？
Software Engineering

追答

你的里面没东西呀。。。
改成这样你再看看：
Software Engineering

1111111

Answer 2

<script>
function switchMenu(evt){
var ele=evt.target||evt.srcElement; //分别针对非ie和ie，获取事件的源对象
if(ele.tagName=="H1"){ //如果是<h1>
var ulu=ele.parentNode.getElementsByTagName("ul");
for(var i=0;i<ulu.length;i++)
{
ulu[i].style.display="none";
}
do{
ele=ele.nextSibling; //反复取下一个兄弟节点，直到节点为<ul>或为null
}while(ele&&ele.tagName!="UL");
if(ele){
var display=evt.target?getComputedStyle(ele,null).display:
ele.currentStyle.display; //分别针对非ie和ie，获取<ul>的当前css属性display
ele.style.display=display=="none"?"":"none"; //切换
}
}
}
</script>
<div onclick="switchMenu(event)">
<h1>标题111</h1>
<ul style="display:none;">
<li>AAAAA</li>
<li>AAAAA</li>
</ul>
<h1>标题222</h1>
<ul style="display:none;">
<li>BBBBB</li>
<li>BBBBB</li>
</ul>
<h1>标题333</h1>
<ul style="display:none;">
<li>CCCCC</li>
<li>CCCCC</li>
</ul>
</div>