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

Posted 2023-03-24

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

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

参考技术A 1,onclick获取点击的div元素onclick="xxxx(this)"
2,通过点击div与需要操控的div相对位置，过去需要操控的div，如obj.getElementsByTagName("div");
3,对这些div进行直接的操作。div.style.visibility="hidden"或者div.style.display="none" 这些看你的具体需求。 参考技术B 你的id重复了，id唯一，试试class吧追问

class好像就没效果了。

追答

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

div 的显示隐藏问题

一个页面有两个div 层，和两个按钮，就是说我选择其中一个div显示而点击另一个div 显示的时候，界面必须只能显示一个div。

这个就用jquery了，很方便 在你的页面里包含一个jquery的js文件，先网上下下来，放在你的一个目录下包含到页面里<script src="js文件的目录" type="text/javascript"></script> <div class="div1" style="display:none;">先设置为隐藏</div><div class="div2">这个为显示的</div>两个按钮<input type="button" name="button1" value="button1" onclick="Button1();"/><input type="button" name="button2" value="button2" onclick="Button2();"/> <script type="text/javascript">//点击button1，显示div1；反之，显示div2function Button1() $(".div1").show(); $(".div2").hide(); function Button2() $(".div1").hide(); $(".div2").show();</script>这个是最简单的jquery运用 参考技术A <style>
buttonoutline:0;
divwidth:300px;height:200px;display:none;
.redcolor:#fff;background:red;
.bluecolor:#fff;background:blue;
</style>
<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function()
$('button').click(function()
var index=$(this).index();//获取被点击的按钮索引
$('div').eq(index).show().siblings('div').hide();//图层切换，不受限制，可随意加减按钮和图层，只要按钮跟图层数量一致即可。
$(this).addClass($('div').eq(index).attr('class')).siblings('button').removeAttr('class');//让按钮背景也和图层一致。
).eq(0).click();//默认第一个按钮被点击。
);
</script>
<button>红色层</button><button>蓝色层</button>
<div class="red"></div><div class="blue"></div>