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

本文转载自查看原文 2016-10-21 18:58 3877 前端开发/ 树形目录

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

代码：

<!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.1</li>
            <li>目录1.1.2</li>
            </ul>
        </li>
        <li>目录1.2
            <ul>
            <li>目录1.2.1</li>
            <li>目录1.2.2</li>
            <li>目录1.2.3</li>
            </ul>
        </li>
        <li>目录1.3
            <ul>
            <li>目录1.3.1</li>
            <li>目录1.3.2</li>
            <li>目录1.3.3</li>
            </ul>
        </li>
        </ul>
    </li>
    
    <li>目录2
        <ul>
        <li>目录2.1</li>
        <li>目录2.2</li>
        <li>目录2.3</li>
        </ul>
    </li>
    
    <li>目录3
        <ul>
        <li>目录3.1</li>
        <li>目录3.2</li>
        <li>目录3.3</li>
        </ul>
    </li>
</ul>
</body>
</html>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 vue+element-ui实现可折叠的树形表格 sublime text3展开/折叠所有目录快捷键给GroupBox动态添加一个按钮，实现展开和折叠功能 vue、iview动态菜单（可折叠）自定义可折叠的Panel控件 android：使用BaseExpandableListAdapter实现可折叠的列表【IDEA】+ 代码折叠与展开 Android可折叠式菜单栏 vscode--代码折叠与展开 el-tree 展开折叠