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>

转载于:https://www.cnblogs.com/smartsmile/p/6234167.html