Javascript 100%宽度下拉菜单

我想尝试实现我的wordpress菜单的100%宽度下拉列表

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

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

子1
次级2

只有当我的子菜单没有嵌套在顶级导航列表中时，下拉菜单才会起作用

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

子1
次级2

---

如何更改脚本以使下拉菜单与当前菜单（列表标记内的子菜单UL的html结构）一起工作？我真的不想编辑我的wordpress菜单，我也不确定如何为此更改html

我有副菜单

您想要的结构可以通过JS实现，您只需抓取嵌套在

菜单项中的子菜单

，然后使用

然而，还有一个问题与问题的上下文无关，你可以随时将其添加到问题中；）-菜单动画与下一个动画重叠，而不是先设置一个动画，然后再设置另一个动画

此外，对于UX，我建议您提高菜单动画的速度，

350ms

并不是很快，它比jQuery默认动画速度快

50ms

我会将其最大值增加到150毫秒左右——但这只是建议；）

编辑

在阅读了@2pha对您的问题的评论之后，这也是值得注意的

您可以使用jquerys或获取正确的元素。当然，这只有在主菜单的

li

中没有

溢出：隐藏
时才有效

（旁注-jquerys
.find（）
是一种更快的方法，直到您开始深入嵌套为止。）

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

jQuery是一个库，它将DOM节点转换为jQuery集合（jQuery对象的数组），所有这些集合都有已加载的函数。每次调用
$（选择器）
时，您都在创建一个新对象。这并没有那么重，但如果你经常这样做，你的网站很容易在移动平台上落后

如果要使用某个对象不止一次或两次，请将选择器放在一个变量中，如@2pha所述：
var hovered=$（hovered）

然后简单地使用hovered.someJQmethod（）
-这使用缓存对象而不是新实例，这节省了大量资源（尤其是手机）

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

祝你好运，希望这会有所帮助；）
 把小提琴上所有的积垢都去掉，因为它太难读了。也可以适当缩进。让我们可以方便地帮助您。@2pha您好，我想把wordpress中的类保留下来。这是我必须处理的html，脚本可能需要它们？有什么想法吗？问题在于您使用的是
$（悬停）。下一步（'.sub-menu'）
，如果子菜单是子菜单，则不会选择该子菜单。使用
$（悬停）。子菜单（'.sub-menu'）
有效。此外，不要总是使用
$（悬停）
，而是将其放入一个变量中，并使用
悬停=$（此项）
然后使用
悬停
而不是
$（悬停）
。不用再给JQuery打这么多次电话了，谢谢@2pha。你们俩都帮了大忙没问题，很高兴我能帮忙（也有一点帮助）。您的问题很好，在查看@WP标记时可能会感到困惑。这是我不与WP合作的主要原因——所有的膨胀；）但我确信他们也在好转！我的菜单在wordpress中运行，现在的问题是，当我浏览页脚或顶部菜单中的任何导航链接时，页脚上的子菜单消失了。有没有办法阻止这种情况，我的页脚ID是#menu footer menu。这与顶部菜单的html结构完全相同，只是UL的ID是#菜单页脚菜单，而不是#菜单主导航。希望有帮助。我需要一些代码来使页脚豁免@Sidney？WP对页眉和页脚菜单使用相同的类——很可能是；）因此，您要做的是将您编写的JS应用到一个更具体的选择器，以便只有您的头会受到更改的影响。您可以使用选择器
$（“#菜单主导航.菜单项”）
中标题菜单中的ID来执行此操作-只有
#菜单主导航
中的
.菜单项
将受到影响；）确保您的页脚不共享相同的ID tho！（在我的链接小提琴中更改第13行）再次感谢@Sidney。我真傻，以前没想到那件事。我将菜单的ID添加到提到子菜单的所有实例中，这就成功了。刚开始只是换第13行没用。你是一个很棒的人，非常感谢。希望它能帮助你，这就是这个社区的目的！-注意不要复制ID的THO（意想不到的JS行为等）-如果我的答案以任何方式有积极的效果，我想让你考虑一下投票按钮；