html目录树的操作

示例：http://www.cnblogs.com/endv/p/4018554.html#endv9

目录
1.目录1
2.目录
3.目录
4.目录
5.目录
6.目录
7.目录
8.目录
9.目录
10.目录
11.目录
       目录连接到标题，先看效果，单击折叠或展开，原代码在 目录5。

1. 目录

2. 目录

3. 目录

4. 目录

0000

5. 目录 原代码在这里（展开）

0000 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
 
</head>
<body>
    <div>
        <div id="endv" style="color: #ff0000;" onclick="document.all.endv0_1.style.display = (document.all.endv0_1.style.display == 'none') ? '' : 'none'" dir="ltr">目录</div>

        <!--<div id="endv1">-->

        <div id="endv0_1">
            <a href="#endv1">1.目录1 </a><br />
            <a href="#endv2">2.目录</a><br />
            <a href="#endv3">3.目录  </a><br />
            <a href="#endv4">4.目录  </a><br />
            <a href="#endv5">5.目录  </a><br />
            <a href="#endv6">6.目录  </a><br />
            <a href="#endv7">7.目录  </a><br />
            <a href="#endv8">8.目录  </a><br />
            <a href="#endv9">9.目录  </a><br />
            <a href="#endv10">10.目录  </a><br />
            <a href="#endv11">11.目录  </a><br />
           
        </div> <!-- endv1 -->
        <!--<div id="endv4">-->

        <div id="endv1" style="color: #ff0000;" onclick="document.all.endv1_1.style.display = (document.all.endv1_1.style.display == 'none') ? '' : 'none'"
             dir="ltr"  ><h2 aria-atomic="false">1. 目录</h2></div>


        <div id="endv1_1">
            插入内容
        </div>
        <!-- endv1 -->

        <!--<div id="endv4">-->

        <div id="endv2" style="color: #ff0000;" onclick="document.all.endv2_1.style.display = (document.all.endv2_1.style.display == 'none') ? '' : 'none'"
             dir="ltr" aria-atomic="true"><h2 aria-atomic="false">2. 目录</h2></div>


        <div id="endv2_1">
            0000
        </div><!-- endv1 -->

        <!--<div id="endv4">-->

        <div id="endv3" style="color: #ff0000;" onclick="document.all.endv3_1.style.display = (document.all.endv3_1.style.display == 'none') ? '' : 'none'"
             dir="ltr" aria-atomic="true"><h2 aria-atomic="false">3. 目录</h2></div>


        <div id="endv3_1">
            0000
        </div><!-- endv1 -->


        <!--<div id="endv4">-->

        <div id="endv4" style="color: #ff0000;"  onclick="document.all.endv4_1.style.display = (document.all.endv4_1.style.display == 'none') ? '' : 'none'"
             dir="ltr" aria-atomic="true"><h2 aria-atomic="false">4. 目录</h2></div>


        <div id="endv4_1">
            0000
        </div><!-- endv1 -->
        <!--<div id="endv5">-->

        <div id="endv5" style="color: #ff0000;" onclick="document.all.endv5_1.style.display = (document.all.endv5_1.style.display == 'none') ? '' : 'none'"
             dir="ltr" aria-atomic="true"><h2 aria-atomic="false">5. 目录</h2></div>


        <div id="endv5_1">
            0000
        </div><!-- endv1 -->
        <!--<div id="endv6">-->

        <div id="endv6" style="color: #ff0000;" onclick="document.all.endv6_1.style.display = (document.all.endv6_1.style.display == 'none') ? '' : 'none'"
             dir="ltr" aria-atomic="true"><h2 aria-atomic="false">6. 目录</h2></div>


        <div id="endv6_1">
            0000
        </div>
        <!--<div id="endv7">-->

        <div id="endv7" style="color: #ff0000;" onclick="document.all.endv7_1.style.display = (document.all.endv7_1.style.display == 'none') ? '' : 'none'"
             dir="ltr" aria-atomic="true"><h2 aria-atomic="false">7. 目录</h2></div>


        <div id="endv7_1">
            0000
        </div>
        <!--<div id="endv8">-->

        <div id="endv8" style="color: #ff0000;" onclick="document.all.endv8_1.style.display = (document.all.endv8_1.style.display == 'none') ? '' : 'none'"
             dir="ltr" aria-atomic="true"><h2 aria-atomic="false">8. 目录</h2></div>


        <div id="endv8_1">
            0000
        </div>
        <!--<div id="endv1">-->

        <div id="endv9" style="color: #ff0000;" onclick="document.all.endv9_1.style.display = (document.all.endv9_1.style.display == 'none') ? '' : 'none'"
             dir="ltr" aria-atomic="true"><h2 aria-atomic="false">9. 目录</h2></div>


        <div id="endv9_1">
            0000
        </div>
        <!--<div id="endv10">-->

        <div id="endv10" style="color: #ff0000;" onclick="document.all.endv10_1.style.display = (document.all.endv10_1.style.display == 'none') ? '' : 'none'"
             dir="ltr" aria-atomic="true"><h2 aria-atomic="false">10. 目录</h2></div>


        <div id="endv10_1">
            0000
        </div>
        <!--<div id="endv11">-->

        <div id="endv11" style="color: #ff0000;" onclick="document.all.endv11_1.style.display = (document.all.endv11_1.style.display == 'none') ? '' : 'none'"
             dir="ltr" aria-atomic="true"><h2 aria-atomic="false">11. 目录</h2></div>







    </div>
</body>
</html>
代码

6. 目录

0000

7. 目录

0000

8. 目录

9. 目录

10. 目录

11. 目录

 作者：http://www.cnblogs.com/endv/p/4018554.html#endv9

源码下载：http://files.cnblogs.com/endv/Htmltree.zip

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/endv/p/4018554.html