Question

js点击一个div控制另一个div内容的显示与隐藏同时小图标也要切换状态，页面有好几个这样的div。

左边图是我要的效果，右边图只是我随便写的一个demo，哪位大神能把效果实现啊。效果：内容默认显示，点击标题栏内容隐藏的同时箭头状态也要切换。用js写。不能用插件





Answer 1

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
.menu {width:300px; height:48px; line-height:48px; text-align:right; background-color:#eef}
.menu i {margin:0 4px}
.detail {width:300px; border:1px solid #ddf}
</style>
<div class="menu">显示/隐藏<i class="fa fa-edit"></i><i class="fa fa-chevron-circle-down"></i></div>
<div class="detail">
   <div>详情1行</div>
   <div>详情2行</div>
   <div>详情3行</div>
</div>
<div class="menu">显示/隐藏<i class="fa fa-edit"></i><i class="fa fa-chevron-circle-down"></i></div>
<div class="detail">
   <div>详情1行</div>
   <div>详情2行</div>
   <div>详情3行</div>
</div>
<div class="menu">显示/隐藏<i class="fa fa-edit"></i><i class="fa fa-chevron-circle-down"></i></div>
<div class="detail">
   <div>详情1行</div>
   <div>详情2行</div>
   <div>详情3行</div>
</div>
<div class="menu">显示/隐藏<i class="fa fa-edit"></i><i class="fa fa-chevron-circle-down"></i></div>
<div class="detail">
   <div>详情1行</div>
   <div>详情2行</div>
   <div>详情3行</div>
</div>
<script>
window.onload=function(){
   var menus=document.querySelectorAll("div.menu");
   var details=document.querySelectorAll("div.detail");
   for(var i=0;i<menus.length;i++){
      details[i].style.display="none";
      menus[i].id=i;
      menus[i].onclick=function(){
         if(details[this.id].style.display=="none"){
            details[this.id].style.display="block";
            this.querySelector("i:nth-of-type(2)").className="fa fa-chevron-circle-up";
         }else{
            details[this.id].style.display="none";
            this.querySelector("i:nth-of-type(2)").className="fa fa-chevron-circle-down";
         }
      }
   }
}
</script>

Answer 2

1,onclick获取点击的div元素onclick="xxxx(this)"
2,通过点击div与需要操控的div相对位置，过去需要操控的div，如obj.getElementsByTagName("div");
3,对这些div进行直接的操作。div.style.visibility="hidden"或者div.style.display="none" 这些看你的具体需求。

Answer 3

你的id重复了，id唯一，试试class吧

追问

class好像就没效果了。

追答

var d = document.getElementsByClassName("detail");
你要用这个获取元素