使用相关悬停构建悬停导航系统?
嘿,堆栈溢出人员,
在使用 jquery 构建自定义下拉导航系统时似乎总是会出现一个快速问题。现在,下拉菜单的理想情况是将父项和子项放在
假设您有一个包含主导航项的 DIV,下面的另一个包含子菜单。
当您将鼠标悬停在父菜单上时,子菜单会出现,但是当它们是单独的时,卷展状态会变得很棘手。所以我嵌套了悬停来尝试解决这个问题,这一切都差不多。
$("div.primary-nav").mouseenter(function () {
清除超时($(this).data('timeoutId'));
$("div.doormat-nav-wrapper").slideDown("慢");
}).mouseleave(函数() {
$("div.doormat-nav-wrapper").mouseenter(function () {
清除超时($(this).data('timeoutId'));
$("div.doormat-nav-wrapper").slideDown("慢");
}).mouseleave(函数() {
var 某个元素 = this;
var timeoutId = setTimeout(function(){
$("div.doormat-nav-wrapper").slideUp("慢");
$(someelement).data('timeoutId', timeoutId); //设置timeoutId,允许我们在鼠标返回时清除此触发器
});
});
});
从逻辑上讲,我想要实现的是
当用户滚动到 div.primary-nav .... div.doormat-nav-wrapper 显示...当滚动主导航时 div.doormat-nav-wrapper 隐藏除非 div.doormat-nav-包装器本身正在悬停。
如有任何反馈或建议,我们将不胜感激。谢谢!
Hey there stack overflow crew,
Quick question that always seems to come up when building custom drop down navigation systems using jquery. Now the ideal scenario for drop down menus would be to have the parent and children in
Let's say you have a DIV containing your primary navigation items and another below containing your child menus.
When you rollover the parent the child menu appears however when these are seperate 's the rollout state get's tricky. So I nested the hovers to try and get around this and it alllmost works.
$("div.primary-nav").mouseenter(function () {
clearTimeout($(this).data('timeoutId'));
$("div.doormat-nav-wrapper").slideDown("slow");
}).mouseleave(function () {
$("div.doormat-nav-wrapper").mouseenter(function () {
clearTimeout($(this).data('timeoutId'));
$("div.doormat-nav-wrapper").slideDown("slow");
}).mouseleave(function () {
var someelement = this;
var timeoutId = setTimeout(function(){
$("div.doormat-nav-wrapper").slideUp("slow");
$(someelement).data('timeoutId', timeoutId); //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
});
});
});
Logically what I'm trying to achieve is
When the user rolls over the div.primary-nav .... div.doormat-nav-wrapper shows... when rolling off the primary nav div.doormat-nav-wrapper hides UNLESS div.doormat-nav-wrapper itself is being hovered on.
Any feedback or suggestions would be greatly appreciated. THANKS!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我相信这与我之前回答过的问题完全相同:
jQuery:将鼠标悬停在 div 上打开子菜单,当鼠标移开时该子菜单应保持打开状态
I believe this is exactly the same kind of thing I've answered before:
jQuery: Mousover on a div open submenu which should stay open when mouseout