javascript - 相对于主菜单项定位子菜单项,但在外部 div 中
问题描述
我正在尝试更改站点的子菜单行为。原始子菜单显示为下拉菜单,而我希望它出现在单独的完整水平 div 中。
到目前为止,我已经这样做了:
jQuery(document).ready(function( $ ){
$(".header").append("<div class='subber'><div class='sub-menu'></div></div>");
$(".main-navigation ul li.menu-item-has-children").mouseover( function() {
var a = $(this).find(".sub-menu").html();
$(".subber .sub-menu").html(a);
});
});
...带有一些CSS,效果很好。原始子菜单 HTML 被复制到子子菜单。
我希望每个子子菜单相对于原始菜单项定位,即使它们出现在 HTML 的不同区域中。我可以以某种方式绑定两者吗?
我的 HTML 代码:
<div class="header">
<div id="navigation">
<div class="site-navigation">
<nav class="main-navigation">
<ul class="menu-main-menu">
<li class="menu-item">
<a href="#">some text</a>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">some text</a>
<ul class="sub-menu">
<li class="menu=item">
<a href="#">sub item text</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="#">some text</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="subber">
<div class="sub-menu"></div>
</div>
</div>
解决方案
由于 HTML 结构中没有实际的父子关系,因此没有 CSS 方式来相对于顶级菜单项定位新的子菜单。
相反,您必须使用 JS 手动定位新的子菜单,使用原始菜单项的坐标。
请记住,这种基本定位不会在两者之间产生“粘性”,因此如果您的主菜单移动(例如,带有向上/向下切换状态的滑动菜单栏),您必须触发对子菜单的更新使用监听器和函数定位菜单。
$("#menuItem1").mouseover( function() {
/* get original menu */
var origMenu = $(this);
/* grab content out of original sub-menu */
var myContent = origMenu.find(".sub-menu").html();
/* copy content over to new sub-menu outside of navigation */
$(".subber .sub-menu").html(myContent);
/* get the coordinates of the original menu item */
var subberLeftOffset = origMenu.offset().left;
var subberTopOffset = origMenu.offset().top + origMenu.innerHeight(true);
/* re-position the new sub-menu so it appears below the original menu */
$(".subber").offset({top: subberTopOffset, left: subberLeftOffset});;
});
#origNavigation .sub-menu {
visibility: hidden;
height: 0px;
}
#menuItem1 {
margin-top: 8em;
margin-left: 8em;
padding: 1em;
width: 200px;
border: 1px solid black;
}
<div id="origNavigation">
<div id="menuItem1">
Hello
<div class="sub-menu">Sub-menu</div>
</div>
</div>
<div class="subber">
<div class="sub-menu"></div>
</div>
推荐阅读
- javascript - 当mousedown直到mouseup时如何做工作?
- graphene-python - 如何以字符串的形式获取模型模式(type_defs)?
- wordpress - bot 框架中网络聊天频道上的通知
- visual-studio-code - 如何防止 VS Code 记住工作文件夹之外的文件?
- java - 如何在 Android 的 PayUMoney 支付网关中设置多种支付选项
- r - 使用 r 清理地理编码数据
- windows - 如何使用 MSYS2/MINGW64 gdb 调试使用 MSYS2/MINGW64 工具链构建但不是从 MSYS2 shell 内部构建的程序
- axapta - 如何从 InventDim 获取 InventSerialId 的计数
- botframework - 我们从哪个版本的 MS Teams 开始收到绿色成功消息?
- java - 使用 Java 中的 selenium Web 驱动程序通过 Google/Facebook 帐户登录 ajio.com