Question

我想尝试为我的wordpress菜单实现100％宽度下拉。

我的问题是我的wordpress菜单有这样的结构，子菜单ul嵌在我的导航列表中。

<li><a href="">menu-1</a> 
<ul class="sub-menu">
<li>sub 1</li>
<li>sub 2</li>
</ul>
</li>

下拉列表仅在我的子菜单没有嵌套在顶级导航列表中时才有效。

<li><a href="">menu-1</a> </li>
<ul class="sub-menu">
<li>sub 1</li>
<li>sub 2</li>
</ul>

My fiddle of the drop working on menu 1 and not working on menu 2

如何更改我的脚本以便下拉工作与当前（html结构列表标签中的子菜单UL）我真的不想编辑我的wordpress菜单而我不是确定如何为此更改html。

Answer 1

我有子菜单in this fiddle

你想要的结构可以通过JS来实现，你需要做的就是抓住嵌套在.menu-item中的子菜单，然后在parent .menu-item之后插入它们。使用insertAfter

然而，另一个问题不在问题的上下文中，你可以随时添加到课程问题;） - 菜单动画与下一个重叠，而不是先在另一个动画之前设置动画。

此外，对于UX，我建议你提高菜单动画的速度，350ms不是很快，它比jQueries默认动画速度快50ms。

我会将此增加到最大约150ms - 但这只是建议;）

修改

在阅读@ 2pha对你的问题的评论后，这也是需要注意的事项。

您可以使用jQueries hovered.children('.sub-menu')或hovered.find('.sub-menu')来获取正确的元素。当然，只有在主菜单overflow: hidden中没有li时才有效。

（在旁注 - jQueries .find()是更快的方法，直到你开始深深地嵌套。）

然后还有你可以考虑的变量缓存。

jQuery是一个将DOM节点转换为jQuery集合（jQuery对象数组）的库，它们都加载了函数。每次拨打$(selector)时，您都会创建一个全新的对象。这并不重，但如果你这样做很多，你的网站很容易落后于移动平台。

如果您要使用多次或两次以上的内容，请将选择器放在@ 2pha注明的变量中：var hovered = $(hovered)。

然后简单地使用hovered.someJQmethod() - 它使用缓存的对象而不是新的实例，这为手机节省了大量的资源esp。）。

我想说的是，由于@ 2pha在评论中的输入，这个答案变得更大了。如果你给我信用，给他信用;）

祝你好运，希望这会有所帮助;）

Javascript 100％宽度下拉菜单

1 个答案: