我想尝试为我的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列表标签内的HTML)配合使用,我真的不想编辑我的wordpress菜单,而且我不确定如何更改html这个也。
最佳答案
我有子菜单in this fiddle
您想要的结构可以通过JS实现,您所需要做的就是抓取嵌套在.menu-item
内的子菜单,然后使用 parent
将其插入到.menu-item
的 insertAfter
之后
但是,还有一个问题不在上下文中,您可以随时将其添加到类(class)中;)-菜单动画与下一个动画重叠,而不是在将另一个动画化之前先对其进行动画处理。
此外,对于UX,我建议您提高菜单动画的速度,350ms
并不完全快,它的50ms
比jQueries的默认动画速度还要快。
我将其增加到最大约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()
-这将使用缓存的对象而不是新实例,从而节省了大量资源,尤其是电话;)。
我想指出,由于@ 2pha在评论中的输入,此答案的范围要大得多。如果您给我信誉,请给他信誉;)
祝你好运,希望这能帮到你 ;)