Question

用js怎么控制控制显示与隐藏啊

<li><a href="#">大类一</a></li>

<li class="erji_menu"><a href="#">小类一</a></li>
<li class="erji_menu"><a href="#">小类二</a></li>
<li class="erji_menu"><a href="#">小类三</a></li>
<li class="erji_menu"><a href="#">小类四</a></li>

<li><a href="#">大类二</a></li>

<li class="erji_menu"><a href="#">小类五</a></li>
<li class="erji_menu"><a href="#">小类六</a></li>
<li class="erji_menu"><a href="#">小类七</a></li>
<li class="erji_menu"><a href="#">小类八</a></li>

现在我只想显示大类，点击哪个大类后就显示这个大类下面的小类，再次点击就隐藏这个大类下面的小类
还有，这个大类和小类是通过循环获取的，下面还有好几个大类和小类，怎么用JS控制小类的显示互隐藏啊

Answer 1

利用来JS控制页面控件显示和隐藏有两种方法，两种方法分别利用HTML的style中的两个属性，两种方法的不同之处在于控件隐藏后是否还在页面上占空位。

方法一：

document.getElementById("EleId").style.visibility="hidden";'设置EleId标签隐藏
document.getElementById("EleId").style.visibility="visible";设置EleId标签显示

利用上述方法实现隐藏后，页面的位置还被控件占用，显示空白。

定义和用法

visibility 属性设置元素是否可见。

方法二：

document.getElementById("EleId").style.display="none";设置EleId标签隐藏
document.getElementById("EleId").style.display="inline";设置EleId标签显示

利用上述方法实现隐藏后，页面的位置不被占用。

定义和用法

display 属性设置元素如何显示。

Answer 2

html代码：

<div id='div' style="display:none;">123123</div>
<input type="button" id="btn" value="显示" />

javascript代码：

var div = document.getElementById('div'); //进行显示/隐藏的区域
var btn = document.getElementById('btn'); //控制按钮 
var txt;
btn.onclick = function (){
txt = this.value;
    if(txt==='显示'){
    div.style.display = 'block';
    this.value = '隐藏';
    }else{
    div.style.display = 'none';
    this.value = '显示';
    }
}

Answer 3

你这逻辑有问题，为什么大类和小类的li标签在同一级呢？这样做不是不可以，而是结构不够语义化，建议改为：

<li><a href="#">大类一</a>
<ul>
<li class="erji_menu"><a href="#">小类一</a></li>
<li class="erji_menu"><a href="#">小类二</a></li>
<li class="erji_menu"><a href="#">小类三</a></li>
<li class="erji_menu"><a href="#">小类四</a></li>
</ul>
</li>

<li><a href="#">大类二</a>
<ul>

<li class="erji_menu"><a href="#">小类五</a></li>
<li class="erji_menu"><a href="#">小类六</a></li>
<li class="erji_menu"><a href="#">小类七</a></li>
<li class="erji_menu"><a href="#">小类八</a></li>
</ul>

</li>

实现的方式大概就是点击大类的li标签，查找子标签ul并显示，用jQuery实现：
$('li:not(.erji_menu)').click(function() {
$(this).find('ul').toggle();
});

Answer 4

自己写js实现比较麻烦，

有先人已经为我们写好的库，找些例子学一下，很方便的。

参考例子：
http://berndmatzner.de/jquery/hoveraccordion/

Answer 5

我把一些主要代码给你，剩下的自己做吧
<div id="xxx">
<li><a href="#">大类一</a></li>

<li class="erji_menu"><a href="#">小类一</a></li>
<li class="erji_menu"><a href="#">小类二</a></li>
<li class="erji_menu"><a href="#">小类三</a></li>
<li class="erji_menu"><a href="#">小类四</a></li>

<li><a href="#">大类二</a></li>

<li class="erji_menu"><a href="#">小类五</a></li>
<li class="erji_menu"><a href="#">小类六</a></li>
<li class="erji_menu"><a href="#">小类七</a></li>
<li class="erji_menu"><a href="#">小类八</a></li>
</div>
<input type="button" value="隐藏" onclick="xxx()">
<script>
function xxx(){
document.getElementById("xxx").style.display="none";

}