一個簡單的可摺疊展開的樹形目錄

時間 2019-12-10

原文原文鏈接

樹形目錄效果以下，點擊每一個項能夠摺疊和展開子項。html

代碼：jquery

<!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>

相關標籤/搜索