Question

点击标题显示隐藏内容，但是我要做几百个，难道每个都要加id，并写js吗，代码如下

<i onclick="jl_dlx()">东辽县</i>
<ul id="jl_dlx" style="display: none;">
<li>白泉镇</li>
<li>平岗镇</li>
<li>泉太镇</li>
<li>云顶镇</li>
<li>安恕镇</li>
<li>建安镇</li>
<li>渭津镇</li>
<li>安石镇</li>
<li>辽河源镇</li>
<li>足民乡</li>
<li>甲山乡</li>
<li>凌云乡</li>
<li class="last">金洲乡</li>
</ul>
<js下面>
function jl_dlx(){
var sh = document.getElementById('jl_dlx');
if (sh.value !=0 ) {
sh.style.display="block";
sh.value=0;
}else{
sh.style.display="none";
sh.value=1;
};
}

Answer 1

你可以用class啊，何必要耿直的用ID

首先获取相同class的ul数组 (class="jl_dlx")

var arrUl=document.getElementsByClassName("jl_dlx");
for(var i=0;i<arrUl.length;i++)
{
    arrUl[i].onclick=function(){
        if(this.style.display=="block")
        {
            this.style.display="none";
        }else{
             this.style.display="block";
        }
    }
}

追问

是这样吗？还是我写错了？还是要引用jqurey
东辽县

追答

哦，错了，你的是点击i然后隐藏或者显示后面的Ul，你的应该是一个i对应一个ul吧，把上面的改一下，i的class是jl_dlx，ul的class是ul_dlx

var arrI=document.getElementsByClassName("jl_dlx");
var arrUl=document.getElementsByClassName("ul_dlx");
for(var i=0;i<arrI.length;i++)
{
    var _this=arrUl[i];
    arrI[i].onclick=function(){
        if(_this.style.display=="block")
        {
            _this.style.display="none";
        }else{
             _this.style.display="block";
        }
    }
}

或者也可以用JS的寻找兄弟元素的方法

var arrI=document.getElementsByClassName("jl_dlx");
for(var i=0;i<arrI.length;i++)
{
    var _this=this.nextSbiling;
    arrI[i].onclick=function(){
        if(_this.style.display=="block")
        {
            _this.style.display="none";
        }else{
             _this.style.display="block";
        }
    }
}