jQuery实现的list列表

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