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

Posted 2023-05-09

【中文标题】可折叠菜单改变元素的位置

【英文标题】：Collapsible menu changes position of the element

【发布时间】：2014-09-23 03:53:48

【问题描述】：

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

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

父级具有多级菜单

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

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

第 3 步：现在如果您单击 Child One 或 Parent One 以折叠此菜单，然后将鼠标悬停在孩子二或孩子三菜单的 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

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

【问题讨论】：

可能重复***.com/questions/25032189/collapsible-list

一个可能已经发明了 1000 次的菜单需要做这么多工作。

css3menu.com cssmenubuilder.com/home cssmenumaker.com 等

真诚地想在这里帮助你，300 多行 CSS、100 行 javascript 和 200 多行 html 肯定不需要做你想做的事。您需要分离菜单选项的嵌套及其内容，然后在ddpanel active 容器中交换正确的内容。这就是他们目前很难定位的原因。

耻辱。也许重新发布新的？

【参考方案1】：

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

问题：

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

【讨论】：

感谢您的回复和代码清理，但主要问题仍未解决。此代码的行为方式仍与我的代码示例相同。当我按顺序单击并将鼠标悬停在第 3 级元素上时，它看起来很好，但是如果您关闭父级 1 的 Child One or Child Two 并保持打开的子级 3 并将鼠标悬停在子菜单上，那么您会看到绿色框仍然向上移动。问题是计算正确的 -ve margin-top 与我们悬停的第 3 级菜单无关。

我在想同样的方法来计算适当的martin-top，但我觉得你拥有它会更聪明，这样div 和display:none 就在顶部并且每次你悬停时在不同的菜单上...根据菜单项显示不同的文本...无论如何..我会尝试计算margin-top