jQuery LavaLamp 下拉菜单答案

【问题标题】：jQuery LavaLamp drop downjQuery LavaLamp 下拉菜单
【发布时间】：2013-07-29 16:08:46
【问题描述】：

我一直在寻找解决方案，但不幸的是我找不到任何解决方案。

这是关于保持浮动边框。当您指向子菜单的元素时，边框会运行到位置 .active li（取决于哪个页面处于活动状态 - 例如：如果主页正在运行，则“主页”得到 class= 活动）。

如果它停留在指示光标的元素上会很好。

lavalamp 来源：http://chiroandmelinda.com/jscripts/lavalamp-0.2.0/demo.html

my code

//编辑

有什么方法可以改变“返回”和“移动”功能吗？

来源 - jquery.easing.min.js

【问题讨论】：

您必须更改添加到小提琴中的jquery.lavalamp.min.js。尝试使用 back 和 move 函数
非常感谢您的提示！ :)

标签： jquery drop-down-menu hover lavalamp

【解决方案1】：

我自己解决问题:)

这是我的解决方案如果您不希望在下拉菜单中悬停一些 li 元素后浮动边框离开，则必须在主 ul 中为所有主要 li 元素设置“虚拟”类（而不是在子菜单中！）

例如（我用 class="mainNav"）

<ul>
  <li class="mainNav">Home</li>
  <li class="mainNav">About Us</li>
  <li class="mainNav">Portfolio</li>
    <ul>
      <li>1</li>
      <li>2</li>
    </ul>
  <li class="mainNav">Contact</li>
</ul>

之后，您必须更改 jQueryLavaLamp 源中的一些值我的意思是在 jquery.lavalamp.min.js

MAIN FILE

当您查看此代码 (jquery.lavalamp.min.js) 时，您必须搜索第 63 行，即在这样的原始文件中：

$li = $("li", this), curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];

找到后只需将其更改为如下代码：

$li = $(".mainNav", this), curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];

我先将$(".li", this) 更改为$(".mainNav", this) 之后疯狂的浮动边框（LavaLamp）仅在 class="mainNav" 元素周围浮动！不在 li 元素周围:)

这里有一些JSFIDDLE

我将所有 lavalamp.js 代码粘贴到 javascript 窗口中以直接使用主要问题元素进行操作。

你可以看到我已经在第 9 行写了“.mainNav” 但是你可以把它改成'li'，看看第一个和第二个有什么区别。希望我能帮忙:)

【讨论】：