菜单栏的显示与隐藏

最新推荐文章于 2024-04-12 10:26:56 发布

weixin_30721899

最新推荐文章于 2024-04-12 10:26:56 发布

阅读量434

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/surui/p/7484303.html

版权

效果图：

代码如下：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

ul{

list-style: none;

}

.list li{

width: 100px;

margin-bottom: 5px;

}

/*子ul*/

.list-unstyled{

display: none;

}

.list-unstyled li{

width: 100px;

height: 20px;

}

text-decoration: none;

color:#000;

}

.active{

background-color: skyblue;

}

</style>

<body>

<i class="fa fa-home"></i>指标维护

</a>

</ul>

</li>

<i class="fa fa-graduation-cap"></i>钢铁管理

</a>

</ul>

</li>

<i class="fa fa-bars"></i> 指标管理

</a>

</ul>

</li>

<i class="fa fa-cog"></i>指标增加

</a>

</ul>

</li>

</ul>

</div>

$(function(){

// 点击每个li 子ul显示

$('.list li').click(function(event){

$('a').removeClass('active');

$('.list-unstyled').css('display','none');

console.log('sdf')

$(this).children('ul').toggle()

.parent().children('a').addClass('active')

.parent().siblings().children('a').removeClass('active');

// return false;

// event.stopPropagation();

})

// 给子li添加点击事件

$('.list-unstyled li').click(function(event){

$(this).children('a').addClass('active')

.parent().siblings().children('a').removeClass('active')

.parent().parent().toggle()

.parent().children('a').removeClass('active');

event.stopPropagation();

})

</script>

</body>

</html>

转载于:https://www.cnblogs.com/surui/p/7484303.html

weixin_30721899

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫