为什么下拉菜单在UIKit中不起作用？

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

请参阅下面的GIF：

如你所见, 当我将鼠标悬停在级别1上时, 将正确显示下拉列表。如果将光标移到Level 2上方, 则下拉列表将关闭, 而不是显示Level 2项目的内容。如果我快速将光标移到Level 2项目上方, 然后移到Level 2A或Level 2B项目(没有关联的下拉菜单)上, 则下拉菜单保持打开状态。

这是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), 该错误不再存在。

这里有一些比较的小提琴：

• 你关于UIKit 2.27.5中的错误的案例：http://jsfiddle.net/jqbhyeLg/2/
• UIKit 3中不再是问题：http：//jsfiddle.net/dk19q7t4/6/