html点击一个div实现另一个div的显示与隐藏

最新推荐文章于 2023-09-08 16:57:04 发布

予沬

最新推荐文章于 2023-09-08 16:57:04 发布

阅读量4.1k

点赞数 5

分类专栏：前端文章标签： html css js

本文链接：https://blog.csdn.net/weixin_46050275/article/details/119533988

版权

前端专栏收录该内容

4 篇文章 2 订阅

订阅专栏

效果图：

html代码：

<!--css-->
<style>
.menu {width:300px; height:48px; line-height:48px; background-color:#eef}

.detail {width:300px; border:1px solid #ddf}
</style>


<!--html-->
<div class="menu">点击此div 显示/隐藏</div>
<div class="detail">
   <div>---</div>
   <div>控制此div的显示与隐藏</div>
   <div>---</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>
<script src="https://www.jq22.com/jquery/jquery-migrate-1.2.1.min.js"></script>