我有一个菜单菜单结构,显示三级菜单,但当我单击不同的三级菜单来打开或折叠菜单时,菜单无法正常工作。
示例 http://jsfiddle.net/Ed9nk/21/
Parent One有多级菜单
例如,您按照此顺序操作,您会注意到问题
第 1 步:将鼠标悬停在父项 1 上 > 单击子项 1 第 2 步:单击“子二”或“子三”菜单,并将鼠标悬停在“孙子 x”菜单上,您会注意到绿色框更改了位置。
第 3 步:现在,如果您单击 Parent One
的 Child One
来折叠此菜单,然后将鼠标悬停在 Child Two 或 Child Three 菜单的 Grand Child xx 上,则您可以将会注意到绿色框正确显示。
绿色框保持更改位置,我希望它显示在 div 顶部。我不确定是什么原因造成的
Jquery 代码
$('.dropdown .has-panel ul').hide(function () {
});
$('.dropdown .has-panel').css('display', 'none');
//$('.dropdown .has-panel').css('height','0px');
$('.dropdown .has-panel').parent().click(function () {
$('.dropdown .has-panel').css('display', 'block');
//$("ul", this).show("normal");
$("ul", this).toggle("normal");
});
CSS 用于将绿色框始终放置在顶部
ul.nav > li > .dropdown.has-panel li:nth-child(1) > .dropdown.has-panel .dd-panel {
margin-top: -10px;
background-color:green !important;
}
ul.nav > li > .dropdown.has-panel li:nth-child(2) > .dropdown.has-panel .dd-panel {
margin-top: -54px;
background-color:green !important;
}
ul.nav > li > .dropdown.has-panel li:nth-child(3) > .dropdown.has-panel .dd-panel {
margin-top: -154px;
background-color:green !important;
}
我希望得到这方面的帮助。
更新:
目前,我找到了临时解决办法,我发现当随机单击菜单并将鼠标悬停在 3 级菜单上时,很难自动计算绿色框的 margin-top
位置。我指定的手动边距仅在第一次按顺序单击时才有效 Hover Parent One > Click Child One > Click Child Two >Clich Child Three
在此序列中,如果将鼠标悬停在任何 3 级菜单上,则绿色框始终显示在容器 div 的顶部。但是当我关闭“子一”或“子二”时,绿色框总是采用手动设置的-ve边距,并从顶部位置在菜单外部显示绿色框。
我发现的解决办法是只保持 3 级菜单之一始终打开,这样边距就可以工作 ul.nav > li > .dropdown.has-panel li:nth-child(1 ) > .dropdown.has-panel .dd-panel
最佳答案
为此工作了很长时间......
问题:
您的 span
与菜单选项位于同一 div
中,因此通常它应该与菜单项出现在同一行,但在您的代码中却没有。 t...为了让它出现在顶部,您必须使用负边距
。
代码清理:
这部分导致绿色框在每个 mouseenter
事件上增长...
删除:
var $this = $(this).find(".dropdown ul li");
var ulHeight = $this.parent().height();
var captionHeight = $(this).find('.media-caption').height();
var height = Math.max(ulHeight, captionHeight);
$this.closest('.dd-panel').height(height);
$this.parent().find(".dd-panel").css("height", height - 20 + "px");
您可以更改:
if ($(this).find(".dropdown").hasClass("has-panel")) {} else {
$(this).find(".dropdown").removeClass("dropdown-last");
}
致:
if (!$(this).find(".dropdown").hasClass("has-panel")) {
$(this).find(".dropdown").removeClass("dropdown-last");
}
解决方案:
在.dropdown ul ul .dd-panel
中,更改:
top:-10px;
致:
top:0;
您现在可以手动更改 margin-top
并将负 margin
分配给第二个和第三个子元素,使它们显示在顶部。
ul.nav > li > .dropdown.has-panel li:nth-child(1) > .dropdown.has-panel .dd-panel {
margin-top:-30px;
background-color:green !important;
}
ul.nav > li > .dropdown.has-panel li:nth-child(2) > .dropdown.has-panel .dd-panel {
margin-top:-120px;
background-color:green !important;
}
ul.nav > li > .dropdown.has-panel li:nth-child(3) > .dropdown.has-panel .dd-panel {
margin-top:-220px;
background-color:green !important;
}
根据您的需要更改margin-top
...
<强> JSFiddle Demo
P.S:我在 fiddle 中做了一些代码清理,但我相信,我在这篇文章中涵盖了所有重要的内容。
关于javascript - 可折叠菜单更改元素的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25054906/