Почему это раскрывающееся меню не работает в UIKit?

Я использую UIKit, чтобы попытаться отобразить список HTML как панель навигации. На панели навигации есть несколько элементов, некоторые из которых имеют вложенные дочерние элементы. Я пытаюсь проверить, что тема Wordpress, которую я пишу, поддерживает модульные тесты Wordpress.

Смотрите гифку ниже:

Navbar GIF

Как видите, при наведении курсора на уровень 1 раскрывающийся список отображается правильно. Если я наведу курсор на уровень 2, раскрывающийся список закроется вместо отображения содержимого элемента уровня 2. Если я быстро наведу курсор мимо элемента уровня 2 на элементы уровня 2A или уровня 2B (с которыми не связан раскрывающийся список), раскрывающийся список останется открытым.

Вот HTML-код для элемента li уровня 1:

<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, вызывающая это?


wordpress html wordpress-theming getuikit
person Garry Pettet    schedule 02.07.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Нет, в вашем 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) ошибки больше нет.

Вот пара скрипок для сравнения:

person matthewd    schedule 12.06.2018