jquery京东新版左侧下拉分类导航菜单代码

最新推荐文章于 2022-05-30 20:07:51 发布

转载最新推荐文章于 2022-05-30 20:07:51 发布 · 950 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yy123.ink/frontDetail/11793

文章标签：

#jquery #分类 #javascript

网站模版专栏收录该内容

3170 篇文章

订阅专栏

该博客探讨了JavaScript中关于元素悬停事件处理的实现，使用CSS和JavaScript进行动态定位。当鼠标悬停在.all-sort-list类的.item元素上时，会显示相应的.item-list子元素。博客还涉及到滚动位置判断，确保.item-list的显示效果。此外，点击.close按钮可以隐藏.item-list。

下载地址

$(".all-sort-list >.item").hover(function () { var eq = $(".all-sort-list >.item").index(this), h = $(".all-sort-list").offset().top, s = $(window).scrollTop(), i = $(this).offset().top, item = $(this).children(".item-list").height(), sort = $(".all-sort-list").height(); if (item < sort) { if (eq == 0) { $(this).children(".item-list").css("top", (i - h)); } else { $(this).children(".item-list").css("top", (i - h) + 1); } } else { if (s >h) { if (i - s >0) { Bug, $(this).children(".item-list").css("top", (s - h) + 2); } else { $(this).children(".item-list").css("top", (s - h) - (-(i - s)) + 2); } } else { $(this).children(".item-list").css("top", 3); } } $(this).addClass("hover"); $(this).children(".item-list").css("display", "block"); }, function () { $(this).removeClass("hover"); $(this).children(".item-list").css("display", "none"); }); $(".item >.item-list >.close").click(function () { $(this).parent().parent().removeClass("hover"); $(this).parent().hide(); });

dd: