Javascript 可折叠菜单更改元素的位置

我有一个菜单结构，显示三级菜单，但当我点击不同的三级菜单打开或折叠菜单时，菜单功能不正常

范例

父菜单具有多级菜单

如果你按照这个顺序做，你会注意到这个问题

步骤1：将鼠标悬停在父对象上>单击子对象 第二步：点击Child2或Child3菜单，将鼠标悬停在GrandChildX菜单上，您会注意到绿色框改变了位置

第三步：现在，如果您点击

父一的
子一
折叠此菜单，然后将鼠标悬停在子二或子三的孙子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级菜单上时，很难自动计算绿色框的
边距顶部
位置。我指定的手动边距仅在第一次按顺序单击时有效
Hover Parent one>Click Child one>Click Child Two>Clich Child Three
如果将鼠标悬停在任何级别3菜单上，则绿色框始终显示容器div的顶部。但当我关闭子1或子2时，则绿色框始终采用手动设置的-ve边距，并从顶部位置在菜单外显示绿色框

我发现的解决方法是始终只打开三级菜单中的一个，这样边距将工作
ul.nav>li>.dropdown.has-panel li:n子菜单（1）>.dropdown.has-panel.dd-panel

临时解决方案在这方面工作了很长时间

问题：
您的
span
与菜单选项位于同一
div
中，因此它通常应与菜单项显示在同一行，但在您的代码中它不。。。为了使其显示在顶部，您必须使用负数
边距

代码清理：
这一部分导致绿色框在每个
鼠标指针上增长

删除：

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");
}

致：

解决方案：
在
下拉菜单ul ul.dd面板中，更改：

top:-10px;

致：

现在，您可以手动更改
页边距顶部
，并将负的
页边距
分配给第二个子项和第三个子项，使其显示在顶部

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


p.S:我在fiddle中做了一些代码清理，但我相信，我在这篇文章中涵盖了所有重要的内容。
为此工作了相当长的时间

问题：
您的
span
与菜单选项位于同一
div
中，因此它通常应与菜单项显示在同一行，但在您的代码中它不。。。为了使其显示在顶部，您必须使用负数
边距

代码清理：
这一部分导致绿色框在每个
鼠标指针上增长

删除：

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");
}

致：

解决方案：
在
下拉菜单ul ul.dd面板中，更改：

top:-10px;

致：

现在，您可以手动更改
页边距顶部
，并将负的
页边距
分配给第二个子项和第三个子项，使其显示在顶部

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


p.S:我在fiddle中做了一些代码清理，但我相信，我在这篇文章中涵盖了所有重要的内容。
对于一个可能被发明了1000次的菜单，可能会重复这么多工作。老实说，为了帮助你，300多行CSS、100行javascript和200多行HTML肯定不需要做你想做的事情。您需要分离菜单选项及其内容的嵌套，然后在
ddpanel active
容器中交换正确的内容。这就是为什么他们现在很难定位的原因。可能会重新发布新的菜单？可能会复制一份可能被发明1000次的菜单。老实说，为了帮助你，300多行CSS、100行javascript和200多行HTML肯定不需要做你想做的事情。您需要分离菜单选项及其内容的嵌套，然后在
ddpanel active
容器中交换正确的内容。这就是为什么他们现在很难定位的原因。也许重新发布新的？感谢您的回复和代码清理，但它的主要问题仍然没有解决。此代码的行为方式仍然与我的代码示例相同。当我按顺序单击并将鼠标悬停在level 3元素上时，它看起来很好，但如果关闭父元素的
子元素1或子元素2，并保持打开子元素3并将鼠标悬停在它的子菜单上，则您将看到绿色框仍向上移动。问题是计算正确的-ve margin top，而不考虑我们正在悬停的第3级菜单。我也在想同样的方法来计算适当的
martin top
，但我觉得如果您拥有它，则会更明智，这样带
display:none
的
div
位于顶部，并且每次您悬停在不同的菜单上时。。。根据菜单项的不同，它以不同的文本显示。。。无论如何。。我将尝试我的运气，计算
页边距顶部
感谢您的回复和代码清理，但它的主要问题仍然没有解决。此代码的行为方式仍然与我的代码示例相同。当我按顺序单击并将鼠标悬停在level 3元素上时，它看起来很好，但是