pc页面侧边栏子菜单收缩效果

最新推荐文章于 2025-06-25 09:03:01 发布

肖肖肖丽珠

最新推荐文章于 2025-06-25 09:03:01 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端小知识

本文链接：https://blog.youkuaiyun.com/qq_33769914/article/details/78349740

前端小知识专栏收录该内容

208 篇文章

订阅专栏

本文介绍如何使用CSS transition属性来实现一个具有延迟显示效果的导航菜单，通过隐藏超出固定高度的内容并结合JavaScript来控制菜单的展开与折叠。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击一级菜单时二级菜单显示。注意特效是不会立刻的显示而是延缓几秒钟的状态。

我们考虑到用css的transition的属性。

首先他的多有子菜单都是出现的只是你给他写死了一个高度超过这个高度的内容overflow:hidden.所以你看不见他的二级菜单内容。

//一级菜单
<li class="active"><a class="nav_one ermindex" href="index.html"><i class="s-icon"></i>首页</a></li>

//一级菜单
<li ><a class="nav_one"><i class="s-icon s-icon2"></i>福利管理
<b class="s-arrow1"></b></a>
//二级菜单

</ul>

</div>

.nav_wrap{
background-color: #2e3340;
}

.nav_wrap .nav_ul>li{

height: 50px;

overflow: hidden;
border-left: 3px solid #20242d;

transition: .4s; //添加延缓展开的样式

}

.nav_wrap .nav_ul>li .nav_one {

height: 50px;

line-height:50px;

}

.nav_wrap .nav_ul>li .nav_content li {
height: 30px; //二级菜单高度固定
line-height: 30px;
color: #fff;
font-size: 14px;
}

.nav_wrap .nav_ul>li.active, .nav_wrap .nav_ul>li:hover {
border-color: #ff4138;
background-color: #20242d;
}

js的内容：

$(".nav_wrap .nav_ul > li > .nav_one").on("click", function() {  
   var sLength = $(this).siblings().children().length;  //记住子元素的个数。他的高度是固定的一乘就可以算出总共的高度了
   var liHeight =  $(this).parent().height();    // 记住父元素的高度==50就是缩起来
  
		
    if(sLength > 0 && liHeight==50){  //如果子元素个数大于0，并且他的高度是50的，说明他是缩起的
	$(this).parents("li").css("height",64+Lheight*30).addClass("active");  //展开这个

        $(this).parents("li").siblings().css("height","50px").removeClass("active"); //其他的都缩起
   }else{
      $(this).parents("li").css("height","50px").removeClass("active");
   }
});