jQuery实现的list列表

来源：互联网发布：陈霸先知乎编辑：程序博客网时间：2024/05/21 10:51

这里写图片描述

<div class="menu" id="menu">        <div>            <p>Web前端</p>            <ul style="display:block">                <li>JavaScript</li>                <li>DIV+CSS</li>                <li>jQuery</li>            </ul>        </div>        <div>            <p>后台脚本</p>            <ul>                <li>PHP</li>                <li>ASP.net</li>                <li>JSP</li>            </ul>        </div>        <div>            <p>前端框架</p>            <ul>                <li>Extjs</li>                <li>Esspress</li>                <li>YUI</li>            </ul>        </div>        <div>            <p>前端框架</p>            <ul>                <li>Extjs</li>                <li>Esspress</li>                <li>YUI</li>            </ul>        </div>    </div>

<style>    .menu{width:210px;      margin:50px auto;      border:1px solid #ccc;}.menu p{height:25px;        line-height:25px;        font-weight:bold;        background:#eee;        border-bottom:1px solid #ccc;        cursor:pointer;        padding-left:5px;}.menu div ul{display:none;}.menu li{height:24px;         line-height:24px;         padding-left:5px;}</style>

<script type="text/javascript">    $(function(){        $("p").click(function(){            if($(this).next().css("display")=="none"){                $("ul").slideUp();                $(this).next().slideDown();            }            else{                $("ul").slideUp();            }        });    })</script>

阅读全文

0 0