Jquery仿京東分類導航層簡單實現

    <script src="/js/jquery-1.11.1.min.js" type="text/javascript"></script>  
    <script type="text/javascript">  
        $(function () {  
            var alink01 = $(".item > ul");  
            alink01.hover(function () {  
                //alert div  
                var divId = $(this).find("div").attr("id");  
                var div = $("#" + divId); //要浮動在這個元素旁邊的層    
                div.css("position", "absolute"); //讓這個層可以絕對定位    
                var self = $(this); //當前對象    
                div.css("display", "block");  
                var p = self.position(); //獲取這個元素的left和top    
                var x = p.left + self.width(); //獲取這個浮動層的left    
                div.css("left", x + 45); //20140916修改  
                div.css("top", p.top);  
                div.show();  
                //mouseenter  
                $(this).removeClass("unfocus").addClass("focus");  
            },  
            function () {  
                var divId = $(this).find("div").attr("id");  
                var div = $("#" + divId); //要浮動在這個元素旁邊的層    
                div.css("display", "none");  
                //mouseleave  
                $(this).removeClass("focus").addClass("unfocus");  
            });  
        });  
    </script>  

    <div class="leftbody">

        <div class="item">

        <span>全部分類</span>

        <ul class="focus">

            <li ><strong>內科</strong> <br />

            消化內科 內分泌及免疫

            </li>

        </ul>

        <ul class="unfocus">

            <li ><strong>內科</strong> <br />

            消化內科 內分泌及免疫

            </li>

        </ul>


    <ul class="unfocus">  
        <li ><strong>內科</strong> <br />  
        消化內科 內分泌及免疫   
        </li>   
    </ul>  

    <ul class="unfocus">  
        <li ><strong>內科</strong> <br />  
        消化內科 內分泌及免疫   
        </li>   
    </ul>  
    <ul class="unfocus">  
        <li ><strong>內科</strong> <br />  
        消化內科 內分泌及免疫   
        </li>   
    </ul>  
    <ul class="unfocus">  
        <li ><strong>內科</strong> <br />  
        消化內科 內分泌及免疫   
        </li>   
    </ul>  
    <ul class="unfocus">  
        <li ><strong>內科</strong> <br />  
        消化內科 內分泌及免疫   
        </li>   
    </ul>  

    </div>  
</div>  </pre>