jQuery LavaLamp下拉

Question

我在寻找解决办法，但不幸的是我找不到任何解决办法。

它是关于保持一个浮动的边界。当您指向子.active菜单中的元素时，边框运行到定位​​li (取决于哪个页面是活动的--例如:如果主页正在运行，' home‘got类= active)。

如果它停留在指示游标的元素上，那就太好了。

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

我的代码

//编辑

有没有办法改变‘后退’和‘移动’的功能？

源- jquery.easing.min.js

Answer 1

我解决自己的问题:)

这里是我的解决方案，如果您不希望在drop菜单中悬停一些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>

之后，您必须在jquery.lavalamp.min.js中更改jQueryLavaLamp源代码中的一些值。

主文件

当您查看此代码(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];

在此之后，我首先将class="mainNav"元素转换为$(".mainNav", this) --疯狂的浮动边框(LavaLamp)只在$(".li", this)元素周围浮动！不是围绕li元素:)

这是一些JSFIDDLE

我将所有lavalamp.js代码粘贴到javascript窗口，以便直接使用main元素进行操作。

您可以看到，我已经在第9行中写了".mainNav“，但是您可以将它改为'li‘，看看第一个和第二个有什么区别。希望我能帮上忙:)