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

时间：2014-07-31 09:05:54

标签： javascript jquery html css drop-down-menu

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

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

Parent One有多级菜单

按照此顺序示例您将注意到问题

第1步：将鼠标悬停在Parent 1上>点击Child One 第2步：点击Child Two或Child Three菜单，将鼠标悬停在Grand Child x菜单上，你会注意到Green框改变了位置。

第3步：现在，如果您点击Child One的{​​{1}}来折叠此菜单＆amp;然后将鼠标悬停在儿童二或三儿童菜单的大孩子xx上，你会注意到绿框显示正确。

绿色框保持更改位置我希望它显示在div的顶部。我不确定是什么导致了这个

Jquery代码

Parent One

CSS用于将绿色框始终位于顶部

$('.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");


});

我很感激这方面的帮助。

更新：

现在我已经找到了临时工作，我发现当一个人随机点击菜单并将鼠标悬停在3级菜单上时，很难自动计算绿色框的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; } 位置。我指定的手动保证金仅在按顺序点击第一次margin-top的顺序时才有效，如果将鼠标悬停在任何3级菜单上，则绿色框始终显示容器div的顶部。但是当我关闭Child One或Child Two时，绿色框总是需要-ve margin，手动设置，并从顶部位置显示菜单外的绿色框。

我发现的工作只是保持其中一个3级菜单始终打开，这样边距将起作用Hover Parent One > Click Child One > Click Child Two >Clich Child Three

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

1 个答案:

答案 0 :(得分：4)

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

的问题：

您的span与菜单选项位于同一div中，因此通常它应与菜单项显示在同一行，但在您的代码中却不会显示...为了让它显示在顶部，您将不得不使用否定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分配给第二个和第三个孩子，使其显示在最顶层。

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

相关问题
最新问题