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>  

标签： isp

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。