好友列表怎样实现点击每个分组都可以显示或隐藏分组？

kuangduijiao1769 2017-06-07 08:52:53

...全文

166 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2017-06-07

打赏
举报


<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>

天际的海浪 2017-06-07

打赏
举报

可以从元素位置关系上寻找对应的元素


<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>

everccnight 2017-06-07

打赏
举报

可以啊你在通过动态创建你从数据库里获取的东西添加到页面上不久好了？

kuangduijiao1769 2017-06-07

打赏
举报

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

kuangduijiao1769 2017-06-07

打赏
举报

你说的是在每个标签中都绑定上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>

everccnight 2017-06-07

打赏
举报

不需要这样只需要在每个组上添加相同的点击事件，点击事件后获取对应id，通过id在进行1楼所给的操作就好了

kuangduijiao1769 2017-06-07

打赏
举报

怎样才能把事件绑定到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>

当作看不见 2017-06-07

打赏
举报

楼主思路有些偏差,只需要一个函数 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 ,根据层级关系去正确的显示影藏

kuangduijiao1769 2017-06-07