为什么下拉菜单在UIKit中不起作用（） _WordPress开发

我正在使用UIKit尝试将HTML列表显示为导航栏。导航栏有几个元素, 其中一些元素嵌套了子元素。我正在尝试检查我正在编写的Wordpress主题是否支持Wordpress单元测试。
请参阅下面的GIF：

文章图片
如你所见, 当我将鼠标悬停在级别1上时, 将正确显示下拉列表。如果将光标移到Level 2上方, 则下拉列表将关闭, 而不是显示Level 2项目的内容。如果我快速将光标移到Level 2项目上方, 然后移到Level 2A或Level 2B项目(没有关联的下拉菜单)上, 则下拉菜单保持打开状态。
【为什么下拉菜单在UIKit中不起作用（）】这是Level 1 li项目的HTML：

< li class="uk-parent" data-uk-dropdown="" aria-haspopup="true" aria-expanded="false"> < a href=""> Level 1 < i class="uk-icon-caret-down"> < /i> < /a> < div class="uk-dropdown uk-dropdown-navbar" style=""> < ul class="uk-nav uk-nav-dropdown"> < li class="uk-parent" data-uk-dropdown="" aria-haspopup="true" aria-expanded="false"> < a href=""> Level 2 < i class="uk-icon-caret-down"> < /i> < /a> < div class="uk-dropdown uk-dropdown-navbar" style=""> < ul class="uk-nav uk-nav-dropdown"> < li> < a href="http://localhost/level-1/level-2/level-3/"> Level 3< /a> < /li> < li> < a href="http://localhost/level-1/level-2/level-3a/"> Level 3a< /a> < /li> < li> < a href="http://localhost/level-1/level-2/level-3b/"> Level 3b< /a> < /li> < /ul> < /div> < /li> < li> < a href="http://localhost/level-1/level-2a/"> Level 2a< /a> < /li> < li> < a href="http://localhost/level-1/level-2b/"> Level 2b< /a> < /li> < /ul> < /div>

完整的导航栏HTML在此处(如果问题不在于Level 1 li)：

< ul class="uk-navbar-nav"> < li> < a href="http://wpthemetestdata.wordpress.com/"> Home< /a> < /li> < li> < a href="http://localhost/blog/"> Blog< /a> < /li> < li> < a href="http://localhost/front-page/"> Front Page< /a> < /li> < li class="uk-parent" data-uk-dropdown="" aria-haspopup="true" aria-expanded="false"> < a href=""> About The Tests < i class="uk-icon-caret-down"> < /i> < /a> < div class="uk-dropdown uk-dropdown-navbar" style=""> < ul class="uk-nav uk-nav-dropdown"> < li> < a href="http://localhost/about/page-image-alignment/"> Page Image Alignment< /a> < /li> < li> < a href="http://localhost/about/page-markup-and-formatting/"> Page Markup And Formatting< /a> < /li> < li> < a href="http://localhost/about/clearing-floats/"> Clearing Floats< /a> < /li> < li> < a href="http://localhost/about/page-with-comments/"> Page with comments< /a> < /li> < li> < a href="http://localhost/about/page-with-comments-disabled/"> Page with comments disabled< /a> < /li> < /ul> < /div> < /li> < li class="uk-parent" data-uk-dropdown="" aria-haspopup="true" aria-expanded="false"> < a href=""> Level 1 < i class="uk-icon-caret-down"> < /i> < /a> < div class="uk-dropdown uk-dropdown-navbar" style=""> < ul class="uk-nav uk-nav-dropdown"> < li class="uk-parent" data-uk-dropdown="" aria-haspopup="true" aria-expanded="false"> < a href=""> Level 2 < i class="uk-icon-caret-down"> < /i> < /a> < div class="uk-dropdown uk-dropdown-navbar" style=""> < ul class="uk-nav uk-nav-dropdown"> < li> < a href="http://localhost/level-1/level-2/level-3/"> Level 3< /a> < /li> < li> < a href="http://localhost/level-1/level-2/level-3a/"> Level 3a< /a> < /li> < li> < a href="http://localhost/level-1/level-2/level-3b/"> Level 3b< /a> < /li> < /ul> < /div> < /li> < li> < a href="http://localhost/level-1/level-2a/"> Level 2a< /a> < /li> < li> < a href="http://localhost/level-1/level-2b/"> Level 2b< /a> < /li> < /ul> < /div> < /li> < li> < a href="http://localhost/lorem-ipsum/"> Lorem Ipsum< /a> < /li> < li> < a href="http://localhost/page-a/"> Page A< /a> < /li> < li> < a href="http://localhost/page-b/"> Page B< /a> < /li> < /ul>

HTML中是否存在导致此错误的错误？
#1 不, 你的HTML没有错误。
去年我遇到了完全相同的问题, 这似乎是UIKit 2.x的已知问题。我已经联系了开发人员, 他们说他们可能不会解决此问题, 因为他们已经在开发下一个版本-UIKit 3-不再是问题。
当时我不得不以某种方式解决此问题, 因此我在内部下拉菜单中使用了代理属性< div custom-dropdown> < / div> , 然后使用它选择并初始化了常规的uk下拉菜单, 可以使用API??进行手动控制。它看起来像：

$("[custom-dropdown]").each(function(){ var options = UIkit.Utils.options($(this).attr("custom-dropdown")); $(this).get(0).api = UIkit.dropdown($(this), options); ... });

忠实于他们的话, 一年后(当前在UIKit 3.0.0-rc.5), 该错误不再存在。
这里有一些比较的小提琴：