Jquery仿京东分类导航层简单实现

下面是编程之家 jb51.cc 通过网络收集整理的代码片段。

编程之家小编现在分享给大家，也给大家做个参考。

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

以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。