项目页

来源：互联网发布：网络拓扑什么意思编辑：程序博客网时间：2024/05/22 06:17
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>    <style>        *{            margin: 0;            padding: 0;        }        a{            text-decoration: none;            display: inline-block;            width: 200px;            height: 40px;            line-height: 40px;            text-align: center;            background: #eee;        }        .list li{            list-style: none;            width: 200px;            height: 40px;            line-height: 40px;            text-align: center;            background: rebeccapurple;        }        .list ul{            display: none;        }    </style></head></head><body><ul>    <li class="list">        <a href="#">项目一</a>        <ul style="display: block">            <li>1.1</li>            <li>1.2</li>            <li>1.3</li>            <li>1.4</li>        </ul>    </li>    <li class="list">        <a href="#">项目二</a>        <ul>            <li>2.1</li>            <li>2.2</li>            <li>2.3</li>            <li>2.4</li>        </ul>    </li>    <li class="list">        <a href="#">项目三</a>        <ul>            <li>2.1</li>            <li>2.2</li>            <li>2.3</li>            <li>2.4</li>        </ul>    </li></ul><script>    $(".list a").click(function(){        $(this).siblings("ul").show();        $(this).parents("li").siblings().find("ul").hide();    })</script></body></html>
阅读全文
0 0