一个简单的可折叠展开的树形目录


树形目录效果如下,点击每个项可以折叠和展开子项。

代码:

doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档title>
<style>
ul li ul {
    display:none;
}

style>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">script>
<script>
$(document).ready(function(e) {
    $("ul li").click(function(e) {
        $(this).children("ul").toggle();
        e.stopPropagation(); //阻止冒泡事件
    });
});
script>
head>

<body>
<ul>
    <li>目录1
        <ul>
        <li>目录1.1
            <ul>
            <li>目录1.1.1li>
            <li>目录1.1.2li>
            ul>
        li>
        <li>目录1.2
            <ul>
            <li>目录1.2.1li>
            <li>目录1.2.2li>
            <li>目录1.2.3li>
            ul>
        li>
        <li>目录1.3
            <ul>
            <li>目录1.3.1li>
            <li>目录1.3.2li>
            <li>目录1.3.3li>
            ul>
        li>
        ul>
    li>
    
    <li>目录2
        <ul>
        <li>目录2.1li>
        <li>目录2.2li>
        <li>目录2.3li>
        ul>
    li>
    
    <li>目录3
        <ul>
        <li>目录3.1li>
        <li>目录3.2li>
        <li>目录3.3li>
        ul>
    li>
ul>
body>
html>