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

Question

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

请看下面的 GIF：

如您所见，当我将鼠标悬停在 1 级上时，下拉菜单正确显示。如果我将光标移到 Level 2 上，下拉菜单将关闭，而不是显示 Level 2 项目的内容。如果我快速将光标移过 2 级项目并移动到 2A 级或 2B 级项目（没有关联的下拉菜单）上，下拉菜单保持打开状态。

这是级别 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 在这里（如果问题不在于 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 中是否存在导致此问题的错误？

Answer 1

不，您的 HTML 中没有错误。

我去年也遇到了同样的问题，看起来这是 UIKit 2.x 的一个已知问题。我已经联系了开发人员，他们说他们可能不会解决这个问题，因为他们已经在开发下一个版本 - UIKit 3 - 这将不再是问题。

当时我不得不以某种方式解决这个问题，所以我在内部下拉列表中使用了代理属性 <div custom-dropdown></div>，然后我用它来选择和初始化一个常规的 uk-dropdown，我可以使用 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/