Question

首先，我不擅长JavaScript，通常我正在使用“准备好去”框架。这次我不得不靠自己做点什么网站：http://nordica.optimo365.pl
对不起，这是波兰语，所以当你“悬停”在“PIŁKAROTENNA”上时 - > “ButyPiłkarskie”一切都很好，但是当你去“Piłki”时，菜单就会消失。
我猜测当“ButyPiłkarskie”失去“悬停”时，菜单正在缩小，鼠标在菜单之外。请告诉我如何解决这个问题？

<ul class="nav">
   {% for gn in groupNodes %}
    <li class="nav-item">
    <a href="{{ gn.Url }}" data-id="{{ gn.Id }}" class="nav-link" id="nav-item_{{ gn.Name |Remove:' ' }}">
              {{gn.Name}}
                    </a>
                    <ul class="nav">
                        {% for gnn in gn.Nodes %}
                        <li class="nav-item"><a class="nav-link sub-link" data-id="{{ gnn.Id }}" href="{{ gnn.Url }}">{{ gnn.Name }}</a></li>
                        {% endfor %}
                    </ul>
                </li>
                {% endfor %}
            </ul>

CSS

@media (min-width: 1025px) {
  header .primary-nav .categories-menu-container > ul > li:hover > ul {
    display: block;
    padding-top: 10px;
    min-width: 200px;
    width: 100%;
    margin-left:-35px;
    box-shadow:0px 0px 0.2px 0px #424242;
  }
}

前2个节点（“PIŁKANOŻNA” - ＆gt;“ButyPiłkarskie”）只是在Liquid循环中，如果你想深入，你必须使用异步JS

        (function () {
    $(function () {
        $('header .primary-nav .categories-menu-container > ul > li > ul a').hover(
function () {
    var t = $(this), gId = ('' + t.data('id')).split(',')[1];
    if (gId && t.find('ol').length == 0) {
        $.get(null, { __action: 'Get/Groups', groupId: gId, languageId: __lngId }, function (d) {

            var obj = d.action.Object;
            if (obj.length) {
                var ol = $('<ol class="nav"></ol>');
                t.append(ol);
                $.each(obj, function (i, el) {
                    var a = $('<a class="nav-link sub-sub-link"></a>').attr('href', el.Url).text(el.Title);
                    ol.append(a);
                    a.wrap('<li class="nav-item"></li>')
                });
            }
        });
    }
    else t.find('ol').show();
},
function () {
    $(this).find('ol').hide();
}
);
    });
})(jQuery);

Answer 1

这种情况正在发生，因为当您从“ButyPiłkarskie”移动光标时，li元素的悬停事件将被删除。因此它隐藏了内部元素，第二个菜单向上移动，所以你再次失去主菜单的悬停事件。

据我所知，你需要在点击时触发主菜单事件，或者你需要添加一秒的延迟，这样用户就可以移动到下一个菜单。

Answer 2

该问题是由于margin-bottom应用于“PIŁKARNOLNA”标签内的<li>元素造成的，如下所示。

header .primary-nav .categories-menu-container > ul > li > ul > li {
    padding: 0 20px;
    font-size: small;
    margin-bottom: 11px; <-- This results in removing the hover effect
}

如果您检查“ButyPiłkarskie”<li>并删除margin-bottom: 11px;，它将按预期工作。

希望这对你有所帮助。

第一个元素丢失悬停后消失的菜单

2 个答案: