jquery 简单二级树形菜单

最新推荐文章于 2020-09-09 10:19:19 发布

tang05709

最新推荐文章于 2020-09-09 10:19:19 发布

阅读量1.3k

点赞数

分类专栏：网站相关的其他文章 js

本文链接：https://blog.csdn.net/tang05709/article/details/40430275

版权

js 同时被 2 个专栏收录

109 篇文章 0 订阅

订阅专栏

网站相关的其他文章

83 篇文章 0 订阅

订阅专栏

如图：

html：

<div id="leftbar">
<ul>
<li><a href="#">  Tables</a></li>
<li class="on"><a href="#">  Full width</a></li>
<li> <a href="#">  Forms </a>
<ul>
<li><a href="#">  Basic Form</a></li>
<li><a href="#">  Basic Form</a></li>
<li><a href="#">  Basic Form</a></li>
</ul>
</li>
<li><a href="#">  Eelements</a></li>
</ul>
</div>

css怎么好看自己怎么写；

#leftbar{display: block;float: left;position: relative;width: 220px;z-index: 16;}
#leftbar ul{width:220px; margin:0; padding:0;border-bottom: 1px solid #37414b; display:block; position:relative}
#leftbar li{border-top: 1px solid #37414b;border-bottom: 1px solid #1f262d;display: block; position:relative;}
#leftbar li a{padding: 10px 15px;display: block;}
#leftbar li a:hover,
#leftbar li a:focus{text-decoration: none;background-color:#0099FF;color:#FFFFFF;
}
#leftbar .on a{background:url(../images/menu-active.png) right no-repeat #0099FF;text-decoration: none;color:#FFFFFF;}

js：

$(function(){
$("#leftbar li").find("ul").hide();

$("#leftbar li").each(function(){
$(this).click(function(){
var childs = $(this).find("ul");
if(childs.is(":visible"))
{
childs.hide('fast');
}else
{
childs.show('fast');
}
});
});
});