JavsScript實現樹形目錄

oofw5751 8年前發布 | 2K 次閱讀 JavaScript JavaServlet Java

[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=";
<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></pre>


 123.png    
 本文由用戶 oofw5751 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！