Question

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

请参阅下面的GIF：

Navbar GIF

如您所见，当我将鼠标悬停在第1级时，会正确显示下拉列表。如果我将光标移到第2级，则下拉菜单将关闭，而不是显示第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在这里（如果问题不在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>，然后我用它来选择并初始化我可以使用API手动控制的常规uk-dropdown 。它看起来像是：

$("[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/

为什么这个下拉列表在UIKit中不起作用？

1 个答案: