消息关闭
    暂无新消息!
<script type="text/javascript">
function showHide1(){
var obj=document.getElementById("group1");
if(obj.style.display=="none")
obj.style.display="block";
else
obj.style.display="none";

}
function showHide2(){
var obj=document.getElementById("group2");
if(obj.style.display=="none")
obj.style.display="block";
else
obj.style.display="none";

}
</script>
</head>
<body>
<ul>
 <li class="group" onclick="showHide1()">
 <div>
 <span>在线好友</span>
 </div>
 </li>
  <ul class="ful" id="group1" style="display:none">
   <li class="fli">
    <img class="avatar" src="images/img01.png">
    <span class="fname">好友1</span>
   </li>
   <li class="fli">
   <img class="avatar" src="images/img02.png">
    <span class="fname">好友2</span>
   </li>
  </ul>
 <li class="group" onclick="showHide2()">
 <div>
 <span>离线好友</span>
 </div>
 </li>
  <ul class="ful"  id="group2" style="display:none">
   <li class="fli">
    <img class="avatar" src="images/img03.png">
    <span class="fname">好友1</span>
   </li>
   <li class="fli">
   <img class="avatar" src="images/img04.png">
    <span class="fname">好友2</span>
   </li>
  </ul>

</ul>
</body>
</html>

我写的方法只适合分组特别少的时候,如果分组多了该怎样实现呢?用class控制吗

9个回答

︿ 2
你说的是在每个标签中都绑定上onclick="showHide(this)"吗?这样是可以的, 但是以后会从数据库中读取很多不定就不行了吧量的列表,这样

function showHide(o){
var ob=o.getAttribute("id");
var obj=document.getElementById("group"+ob);
if(obj.style.display=="none")
obj.style.display="block";
else
obj.style.display="none";
}
</script>

</head>
<body>
<ul>

 <li class="group" id="1" onclick="showHide(this)">
 <div>
 <span>在线好友</span>
 </div>
  
  <ul class="ful" id="group1" style="display:none">
   <li class="fli">好友1</li>
   
   <li class="fli">好友2</li>
  </ul>
 </li>
 <li class="group" id="2" onclick="showHide(this)">
 <div>
 <span>离线好友</span>
 </div>
  <ul class="ful"  id="group2" style="display:none">
   <li class="fli">好友3</li>
    <li class="fli">好友4</li>
  </ul>
 </li>
</ul>
︿ 2
可以从元素位置关系上寻找对应的元素

<script type="text/javascript">
function showHide(t){
var obj=t.nextSibling.nextSibling;
if(obj.style.display=="none")
obj.style.display="block";
else
obj.style.display="none";

}
</script>
</head>
<body>
<ul>
 <li class="group" onclick="showHide(this)">
 <div>
 <span>在线好友</span>
 </div>
 </li>
  <ul class="ful" style="display:none">
   <li class="fli">
    <img class="avatar" src="images/img01.png">
    <span class="fname">好友1</span>
   </li>
   <li class="fli">
   <img class="avatar" src="images/img02.png">
    <span class="fname">好友2</span>
   </li>
  </ul>
 <li class="group" onclick="showHide(this)">
 <div>
 <span>离线好友</span>
 </div>
 </li>
  <ul class="ful" style="display:none">
   <li class="fli">
    <img class="avatar" src="images/img03.png">
    <span class="fname">好友1</span>
   </li>
   <li class="fli">
   <img class="avatar" src="images/img04.png">
    <span class="fname">好友2</span>
   </li>
  </ul>

</ul>
<script type="text/javascript">
function showHide(t){
var obj=t.nextSibling.nextSibling;
if(obj.style.display=="none")
obj.style.display="block";
else
obj.style.display="none";

}
</script>
</head>
<body>
<ul>
 <li class="group" onclick="showHide(this)">
 <div>
 <span>在线好友</span>
 </div>
 </li>
  <ul class="ful" style="display:none">
   <li class="fli">
    <img class="avatar" src="images/img01.png">
    <span class="fname">好友1</span>
   </li>
   <li class="fli">
   <img class="avatar" src="images/img02.png">
    <span class="fname">好友2</span>
   </li>
  </ul>
 <li class="group" onclick="showHide(this)">
 <div>
 <span>离线好友</span>
 </div>
 </li>
  <ul class="ful" style="display:none">
   <li class="fli">
    <img class="avatar" src="images/img03.png">
    <span class="fname">好友1</span>
   </li>
   <li class="fli">
   <img class="avatar" src="images/img04.png">
    <span class="fname">好友2</span>
   </li>
  </ul>

</ul>

︿ 1
楼主思路有些偏差,只需要一个函数
function showHide2(id){
var obj=document.getElementById(id);
if(obj.style.display=="none")
obj.style.display="block";
else
obj.style.display="none";

}
把id 作为参数传入即可,其实这样还是不好,由于会有非常多的id ,所以把事件绑定到group 上面,传入this ,根据层级关系去正确的显示影藏 
︿ 0
不需要这样  只需要 在每个组上 添加相同的点击事件,点击事件后获取对应id,通过id在进行1楼所给的操作就好了 
︿ 0

<script type="text/javascript">
function showHide(t){
var obj=t.nextSibling.nextSibling;
if(obj.style.display=="none")
obj.style.display="block";
else
obj.style.display="none";

}
</script>
</head>
<body>
<ul>
 <li class="group" onclick="showHide(this)">
 <div>
 <span>在线好友</span>
 </div>
 </li>
  <ul class="ful" style="display:none">
   <li class="fli">
    <img class="avatar" src="images/img01.png">
    <span class="fname">好友1</span>
   </li>
   <li class="fli">
   <img class="avatar" src="images/img02.png">
    <span class="fname">好友2</span>
   </li>
  </ul>
 <li class="group" onclick="showHide(this)">
 <div>
 <span>离线好友</span>
 </div>
 </li>
  <ul class="ful" style="display:none">
   <li class="fli">
    <img class="avatar" src="images/img03.png">
    <span class="fname">好友1</span>
   </li>
   <li class="fli">
   <img class="avatar" src="images/img04.png">
    <span class="fname">好友2</span>
   </li>
  </ul>

</ul>
︿ 0
可以啊  你在通过动态 创建 你从数据库里获取的东西 添加到页面上不久好了?
︿ 0
怎样才能把事件绑定到group上呢?应该不用再每个标签上写出来吧 毕设刚接触这部分
我试了一下  alert(b)直接跳出两次 第一个class绑定的函数中b也是“group2”   最后不管点击那个分组名都是对第二个分组进行隐藏和显示    
请帮忙看一下

window.onload=function(){
  var a=document.getElementsByClassName("group");
  for(var i=0;i<a.length;i++){
  var aid=a[i].getAttribute("id");
  var b="group"+aid;
   alert(b);
  a[i].onclick=function(){
  var ob=document.getElementById(b);
  alert(ob);
if(ob.style.display=="none")
ob.style.display="block";
else
ob.style.display="none";
   }
 }
}
</script>
</head>
<body>
<ul>

 <li class="group" id="1">
 <div>
 <span>在线好友</span>
 </div>
  
  <ul class="ful" id="group1" style="display:none">
   <li class="fli">好友1</li>
   <li class="fli">好友2</li>
  </ul>
 </li>
  
 <li class="group" id="2">
 <div>
 <span>离线好友</span>
 </div>
  
  <ul class="ful"  id="group2" style="display:none">
   <li class="fli">好友3</li>
   <li class="fli">好友4</li>
  </ul>
 </li>
</ul>
</body>
</html>

︿ 0
4楼手滑
你说的是在每个标签中都绑定上onclick="showHide(this)"吗?这样是可以的, 但是以后会从数据库中读取很多不定量的列表,这样就不行了吧