JavsScript实现树形目录

2018-07-20 来源：open-open

[JavaScript]代码

<<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	.st_tree ul li
	{
			font-size:13px; 
	        color:#222; 
	         line-height:18px; 
	         cursor:pointer;
	         list-style:none; 
		     background:url(st_folder.gif); 
		    background-repeat:no-repeat; 	
		    padding:0 0 3px 20px;
	}
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".ul").hide();
})

$(document).ready(function()
{
	$("#li1").click(function()
	{
	$("#ul1").toggle();
	});
});

$(document).ready(function()
{
	$("#li2").click(function()
	{
	$("#ul2").toggle();
	});
});

$(document).ready(function()
{
	$("#li3").click(function()
	{
	$("#ul3").toggle();

	});
});

</script>

<div class="st_tree">
<ul>
	<li ><a href="#" >一级目录1</a></li>
	<li id="li1"><a href="#" >一级目录2</a></li>
    <ul show="true" id="ul1" class="ul">
		<li ><a href="#" >二级目录2.1</a></li>
		<li ><a href="#" >二级目录2.2</a></li>
	</ul>
	<li id="li2"><a href="#" >一级目录3</a></li>
    <ul id="ul2" class="ul">
		<li ><a href="#" >二级目录3.1</a></li>
		<li ><a href="#" >二级目录3.2</a></li>
		<li id="li3"><a href="#" >二级目录3.3</a></li>
        <ul id="ul3" class="ul">
            <li ><a href="#" >三级目录3.3.1</a></li>
            <li ><a href="#">三级目录3.3.2</a></li>
        </ul>
	</ul>
</ul>
</div>

</body>
</html>

123.png

标签：代码

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。

上一篇: jquery常用操作

下一篇:html5调用摄像头实现拍照

最新资讯

热门推荐