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

Question

我有一个显示三级菜单的菜单结构，但是当我点击不同的三级菜单打开或折叠菜单时，菜单无法正常工作。

示例 http://jsfiddle.net/Ed9nk/21/

父一有多级菜单

例子你按照这个顺序你会注意到问题

第 1 步:将鼠标悬停在父一上 > 单击子一第 2 步:点击 Child Two 或 Child Three 菜单并将鼠标悬停在 Grand Child x 菜单上，您会注意到绿色框改变了位置。

第 3 步:现在，如果您单击 Parent One 的 Child One 折叠此菜单，然后将鼠标悬停在 Grand Child xx of Child Two 或 Child Three 菜单上，您会注意到绿色框正确显示。

绿框不断改变位置，我希望它显示在 div 的顶部。我不确定是什么原因造成的

J查询代码

$('.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 位置。我指定的手动边距仅在第一次按顺序单击时才有效绿色框总是显示在容器 div 的顶部。但是当我关闭 Child One 或 Child Two 时，绿色框总是占用手动设置的 -ve 边距，并从顶部位置在菜单外显示绿色框。

我发现的解决方法是始终只保持 3 级菜单之一打开，这样边距就可以工作 ul.nav > li > .dropdown.has-panel li:nth-child(1 ) > .dropdown.has-panel .dd-panel

临时解决方案http://jsfiddle.net/Ed9nk/43/

Answer 1

在这方面工作了很长时间......

问题:

您的 span 与菜单选项位于同一 div 中，因此它通常应该与菜单项出现在同一行，但在您的代码中却没有t... 为了让它出现在顶部，您将不得不使用负 margin。

代码清理:

这部分导致绿框在每个 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 分配给第二个和第三个 child ，使它们出现在顶部。

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 中做了一些代码清理，但我相信，我在这篇文章中涵盖了所有重要内容。