Jquery仿京东分类导航层简单实现_仿京东首页右侧固定层-优快云博客

本文链接：https://blog.youkuaiyun.com/smartsmile2012/article/details/39337569

该博客展示了如何利用Jquery实现一个简单的京东分类导航效果。通过hover事件监听，当鼠标悬停在类别上时，显示对应的下拉菜单，移开时隐藏，实现了导航层的动态显示和隐藏。代码中利用了Jquery的选择器、事件处理和样式修改功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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