我有一个下拉菜单，子菜单放在不同的元素上。所以基本上当鼠标离开菜单项时，子菜单立即关闭，因为子菜单不是子菜单。
var menuItem = $(".menu-item");
menuItem.hover(hoverIn, hoverOut);
function hoverIn() {
var mnItemMeta = $(this)[0].getBoundingClientRect();
$(".sub-menu").css({
opacity: 1,
left: mnItemMeta.left
})
}
function hoverOut() {
$(".sub-menu").css({
opacity: 0
})
}html,body{background-color: #efefef;}
.menu {
list-style: none;
padding-left: 0;
display: flex;
justify-content: center;
}
a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: inherit;
}
.sub-menu {
opacity: 0;
background-color: white;
position: absolute;
transition: .2s ease;
}
.sub-menu-list {
list-style: none;
padding-left: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="menu">
<li class="menu-item"><a href="#">Menu Item</a>
</li>
</ul>
<div class="sub-menu">
<ul class="sub-menu-list">
<li><a href="#">Sub Menu 1</a>
</li>
<li><a href="#">Sub Menu 2</a>
</li>
<li><a href="#">Sub Menu 3</a>
</li>
<li><a href="#">Sub Menu 4</a>
</li>
</ul>
</div>
6263
now
起源
您可以使用 jquery 为了那个原因， - mmativ
您需要使正在悬停的元素变大，或者将子菜单放在其中 - evolutionxbox
如果您的子菜单需要在外面，那么，当用户指向子菜单链接时，如何打开子菜单。因此子菜单需要在自己的主菜单中。 - Samir
@Samir你检查过我的片段了吗？所以基本上它像tab ui一样，用于保持tab id打开tabcontent。 - Ariona Rian
我遇到了你的问题，你的问题有一个解决方案。只需增加底部填充 li 上课 menu-item。确保 sub-menu 李应该相互依附。但问题是，如果用户想要点击子菜单，此时用户必须离开父母 li，因此 sub-menu 将自动隐藏。你会增加多少父母 li 底部paddnig？你可以吗？ - Samir
答案:
你可以放置 sub-menu 在里面 menu-item。
var menuItem = $(".menu-item");
menuItem.hover(hoverIn, hoverOut);
function hoverIn() {
var mnItemMeta = $(this)[0].getBoundingClientRect();
$(".sub-menu").css({
opacity: 1,
left: mnItemMeta.left
})
}
function hoverOut() {
$(".sub-menu").css({
opacity: 0
})
}html, body {
background-color: #efefef;
}
.menu {
list-style: none;
padding-left: 0;
display: flex;
justify-content: center;
}
a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: inherit;
}
.sub-menu {
opacity: 0;
background-color: white;
position: absolute;
transition: .2s ease;
}
.sub-menu-list {
list-style: none;
padding-left: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="menu">
<li class="menu-item"><a href="#">Menu Item</a>
<div class="sub-menu">
<ul class="sub-menu-list">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li>
</ul>
</div>
</li>
</ul>另一种方法是检查 hover 的状态 .menu-item 和 .sub-menu。你需要在这里使用一点暂停，以防止它提前关闭。
var timeout,
hovered = false,
menuItem = $(".menu-item, .sub-menu").hover(hoverIn, hoverOut);;
function hoverIn() {
hovered = true;
var mnItemMeta = this.getBoundingClientRect();
$(".sub-menu").show().css({
opacity: 1,
left: mnItemMeta.left,
});
}
function hoverOut() {
hovered = false;
clearTimeout(timeout);
timeout = setTimeout(function() {
if (!hovered) {
$(".sub-menu").css({
opacity: 0,
}).hide()
}
}, 100);
}html, body {
background-color: #efefef;
}
.menu {
list-style: none;
padding-left: 0;
display: flex;
justify-content: center;
}
a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: inherit;
}
.sub-menu {
opacity: 0;
background-color: white;
position: absolute;
transition: .2s ease;
}
.sub-menu-list {
list-style: none;
padding-left: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="menu">
<li class="menu-item"><a href="#">Menu Item</a></li>
</ul>
<div class="sub-menu">
<ul class="sub-menu-list">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li>
</ul>
</div>
6
2017-09-21 09:12
@eisnehr我已经知道了，但这是针对不同的布局，子菜单需要放在菜单项之外。 :) - Ariona Rian
我用第二个例子@ArionaRian扩展了我的答案 - eisbehr
你好@eisnehr，你可以帮我查一下吗？ jsfiddle.net/yans_fied/6wj0of90 似乎需要更多的解决方法 - Ariona Rian
你可以添加
.sub-menu::before{
content:'';
height: <height of menu item>
width: 100%;
position:absolute;
bottom:100%;
}
放置 hoverOut 在...上 .sub-menu。
2
2017-09-25 07:53
我今天在你的剧本上玩了一段时间，从你的开始 小提琴，而不是部分片段......
你太近了......
但问题是你有两个不同的父元素类来处理（读取：事件处理程序绑定到它们）...并以不同的方式处理。
当您将鼠标从打开子菜单的元素移动到另一个应该保持打开状态的元素时，不应触发某些事件。一个 mouseout 只有当鼠标不输入另一个时才会发生事件 menu___item 或者a dropdown-menu__content “快速的”。
mouseenter 和 mouseout 很好 快速 在触发器上...比人类鼠标移动更快。
这里有一个小的100ms延迟。
一个 setTimeout() 设置 dropdown-holder 至 display:none 留下这些元素和一个 clearTimeout 在进入。
$(".menu
热门问题
不使用eval / new函数的JavaScript模板库
当涉及内部类时，Java继承如何工作
.NET Windows服务的奇怪问题
在.ipa或.app下查找App ID
快速入门XSLT参考[关闭]
如何找出Android应用程序中未使用的资源
Ruby中并发的同步方法[重复]
将std :: chrono :: system_clock :: time_point转换为struct timeval并返回
Google Drive API V3（javascript）更新文件内容
Bootstrap 3.0 - 将元素推到底部
受密码保护的.NET ClickOnce部署？
如何用postgresql安装wordpress
coq Set或Type如何成为命题
硒滚动元素进入（中心）视图
在Spring Transaction JUnit测试中自动装配Hibernate会话的正确方法
Git的Dockerfile策略
如何在FOS_PICKFOLDER中使用IFileDialog，同时仍在对话框中显示文件名
在Firefox扩展中复制Google Chrome浏览器操作弹出效果
CakePHP找到MAX
芹菜 - 完成任务的召唤功能
从使用fmemopen创建的流中读取宽字符
.NET是否为每个程序集创建一个字符串实习池？
DefaultModelBinder不绑定嵌套模型
Navigator.MediaDevices.getUserMedia（）使用了哪些相机通信标准？
选择命名空间名称时应该知道什么？
cout
Swagger Codegen CLI Java客户端 - 如何正确使用它
一个很好的哈希函数用于采访整数，字符串？
Maven 3 ciManagement配置的目的是什么？
如何通过语言文化获取代码页？