[JQuery] 如何實現三層垂直主選單

HTML部分：將以下的code放至您想放選單的位置。

<div class="menu">
    <ul>
        <li>
            <a href="#">► Level 1</a>
            <ul class="submenu">
                <li>
                    <a href="#">► Level 1-1</a>
                    <ul class="lastmenu">
                        <li>
                            <a href="#" target="_blank">Level 1-1-1</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">► Level 1-2</a>
                    <ul class="lastmenu">
                        <li>
                            <a href="#" target="_blank">Level 1-2-1</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

JQuery的部分：

<script language="javascript">
    $(function(){
        $(".menu > ul > li > a").click(function(){
            var _this=$(this);
            if(_this.next("ul").length>0){
                if(_this.next().is(":visible")){
                    
                    _this.html(_this.html().replace("▼","►")).next().hide();
                }else{
                    
                    _this.html(_this.html().replace("►","▼")).next().show();
                }
               
                return false;
            }
        });
        
        $(".submenu > li > a").click(function(){
            var _this=$(this);
            if(_this.next("ul").length>0){
                if(_this.next().is(":visible")){
                    
                    _this.html(_this.html().replace("▼","►")).next().hide();
                }else{
                    
                    _this.html(_this.html().replace("►","▼")).next().show();
                }
                
                return false;
            }
        });
        
       
        $("a").focus( function(){
            $(this).blur();
        });
    });
</script>

CSS部分：放置CSS要設定的值

.menu ul li{
    list-style-type: none;
}

.menu a{
    color:#333333; 
    text-decoration:none; 
    font-size:12px;
}

.menu a:hover{
    text-decoration:underline;
}


.menu  .submenu{
    margin-left:5px;
    color:#333333;
    display:none;
    list-style-type: none;
}

.menu  .lastmenu{
    margin-left:10px;
    color:#333333;
    display:none;
    list-style-type: none;
}

 就完成了JQuery實作的三層垂直主選單喔~!! 效果如下：

有問題歡迎留言喔~^O^
祝大家成功~>////<