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>

巴特西

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

最新文章

热门文章