2025-02-15

 一.按照慣例,先上DOM結構
<p id="menu">
            <ul>
                <li>
                    <a href="#nogo">主菜單一</a>
                    <ul>
                        <li><a href="http://usual.blog.51cto.com">子菜單一</a></li>
                        <li><a href="http://usual.blog.51cto.com">子菜單一</a></li>
                        <li><a href="http://usual.blog.51cto.com">子菜單一</a></li>
                        <li><a href="http://usual.blog.51cto.com">子菜單一</a></li>
                    </ul>
                </li>
 
                <li>
                    <a href="#nogo">主菜單二</a>
                    <ul>
                        <li><a href="http://usual.blog.51cto.com">子菜單二</a></li>
                        <li><a href="http://usual.blog.51cto.com">子菜單二</a></li>
                        <li><a href="http://usual.blog.51cto.com">子菜單二</a></li>
                        <li><a href="http://usual.blog.51cto.com">子菜單二</a></li>
                    </ul>
                </li>
 
                <li>
                    <a href="#nogo">主菜單三</a>
                    <ul>
                        <li><a href="http://usual.blog.51cto.com">子菜單三</a></li>
                        <li><a href="http://usual.blog.51cto.com">子菜單三</a></li>
                        <li><a href="http://usual.blog.51cto.com">子菜單三</a></li>
                        <li><a href="http://usual.blog.51cto.com">子菜單三</a></li>
                    </ul>
                </li>
 
                <li>
                    <a href="#nogo">主菜單四</a>
                    <ul>
                        <li><a href="http://usual.blog.51cto.com">子菜單四</a></li>
                        <li><a href="http://usual.blog.51cto.com">子菜單四</a></li>
                        <li><a href="http://usual.blog.51cto.com">子菜單四</a></li>
                        <li><a href="http://usual.blog.51cto.com">子菜單四</a></li>
                    </ul>
                </li>
            
            </ul>
        
        
        </p>
二.有瞭DOM結構,再確定樣式
#menu{
                font-family:Helvetica;
            }
            #menu ul{
                list-style:none;
                margin:0px;
                padding:0px;
                width:250px;
            }
            #menu ul li{
                margin:1px 0px;
                padding:0px;
                
            }
            #menu ul li a{
                height:30px;
                line-height:30px;
                padding-left:10px;
                display:block;
                text-decoration:none;
                font-weight:bold;
                color:#333;
                font-size:16px;
                border:1px solid #ccc;
            }
            #menu ul li a:Hover{
                background:#a0b4dc;
            }
            #menu ul li li a{
                border:none;
                height:25px;
                line-height:25px;
            }
            #menu ul li li a:hover{
                background:yellow;
            }
            #menu ul li ul{
                display:none;
            }
三.然後就是最重要的JQUERY部分瞭
 
(function($){
    $.fn.slideMenu=function(){
        return this.each(function(){
            var menu=$(this);
            menu.find("ul li>a").bind("click",function(event){
                var currentLink=$(event.currentTarget);
                if(currentLink.parent().find("ul.active").size()==1){       //如果被點擊的連接的子菜單已經顯示瞭,就隱藏該子菜單
                    hide(currentLink);
                
                }
                else if(menu.find("ul li ul.active").size()==0){            //如果所有的子菜單都沒有顯示,則顯示點擊的子菜單
                    
                    show(currentLink);
                
                }
                else{                                                       //顯示點擊的子菜單,隱藏已顯示的子菜單
                    menu.find("ul li ul.active").slideUp("medium",function(){
                    
                        menu.find("ul li ul").removeClass("active");
                        show(currentLink);
                    
                    });
                }
 
 
 
            });
            var show=function(currentLink){                                 //顯示子菜單方法
                currentLink.parent().find("ul").addClass("active");
                currentLink.parent().find("ul").slideDown("medium");
            
            }
 
            var hide=function(currentLink){                                 //隱藏子菜單方法
                currentLink.parent().find("ul").removeClass("active");
                currentLink.parent().find("ul").slideUp("medium");
            
            }
        });
    }
 
 
})(jQuery);
四.引用。
$(document).ready(function(){
        $("#menu").slideMenu();
     })
 
作者“前端攻城——usual”

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *