jQuery 展开竖排菜单 

function menu_show(play_type,elementID,firstTag,elementTag,lastTag,_time){
    //play_type为触发事件方式，值可为click或者hover。
    //elementID为此菜单的ID。
    //firstTag此值为列表项每一项的标签名。
    //elementTag为列表项每一项的标签名的下一级的标签名。
    //lastTag二级菜单的标签名
    //_time为展开二级菜单的时间
    if(!$("#"+elementID)){return}
           for(var i=0;i<$(lastTag).length;i++)
           {
            $(lastTag).css("display","none");
           }
             if(play_type==="click"){ $("#"+elementID+" "+firstTag+">"+elementTag).click(
                             function(){
                                 for(var j=0;j<$(lastTag).length;j++){
                                    $(lastTag).slideUp(_time); 
                                 }
                                 if($(this).parent().children(lastTag).css("display")=="none")
                                 {
                                    $(this).parent().children(lastTag).slideDown(_time);
                                }
                                 else
                                 {
                                    $(this).parent().children(lastTag).slideUp(_time);
                                 }
                                 }
                             )}
               if(play_type==="hover"){$(firstTag).hover(
                             function(){
                                    $(this).children(lastTag).slideDown(_time);
                                },
                                function()
                                 {
                                    $(this).children(lastTag).slideUp(_time);
                                 }
                             )}
               else{return}
           }
    setTimeout('menu_show("hover","test","li","p","dl",500)',300)
<body>
<ul id="test">
<li><p>Brands</p>
    <dl>
    <dd><a href="#">and-1</a></dd>
    <dd><a href="#">and-2</a></dd>
    <dd><a href="#">and-3</a></dd>
    </dl>
</li>
<li><p>Product</p>
 <dl>
    <dd><a href="#">and-1</a></dd>
    <dd><a href="#">and-2</a></dd>
    <dd><a href="#">and-3</a></dd>
    </dl>
</li>
<li><p>People</p>
 <dl>
    <dd><a href="#">and-1</a></dd>
    <dd><a href="#">and-2</a></dd>
    <dd><a href="#">and-3</a></dd>
    </dl>
</li>
<li><p>Hand</p>
 <dl>
    <dd><a href="#">and-1</a></dd>
    <dd><a href="#">and-2</a></dd>
    <dd><a href="#">and-3</a></dd>
    </dl>
</li>
<li><p>Color</p>
 <dl>
    <dd><a href="#">and-1</a></dd>
    <dd><a href="#">and-2</a></dd>
    <dd><a href="#">and-3</a></dd>
    </dl>
</li>
</ul>
</body>
<style>
*{font-size:18px;font-family:Arial;color:#fff;padding:0;margin:0; text-decoration:none;}
body{padding:50px; background-color:#efefef;}
ul#test{width:200px;}
ul#test li{list-style-type:none; background-color:#1D8CDE; text-indent:20px;border-bottom:1px solid #fff;}
ul#test li dl{display:none;}
ul#test li dl dd{background-color:#5af;margin-top:1px;text-indent:25px;}
</style>

效果：

posted @ 2012-08-29 12:49  纯属偶然_黄勇  阅读(1495)  评论(0)  编辑  收藏  举报