Question

我有一个编辑菜单，它出现在可能深度嵌套的UL中所选LI的顶部边缘。该编辑菜单可能掩盖前一个相邻LI的文本，因此如果您将鼠标悬停在前一个LI上（无论LI属于哪个UL），我希望能够隐藏编辑菜单。此外，在编辑菜单和编辑菜单之前的最后一个可见LI之间可能存在隐藏的LI，因此我们只想处理最后一个可见的LI。

在我的下面示例中，当您将鼠标悬停在li＃3上时，我希望隐藏.edit-menu div。

<ul>
  <li id="1">
     <ul>
        <li id="2"></li>
        <li id="3">HOVER ME</li>
     </ul>
  </li>
  <li id="4" style="display:none;">HIDDEN, SO SKIP THIS ONE</li>
  <li id="5" class="selected">
     <div class="edit-menu">Edit</div>
     SELECTED LI
  </li>        
</ul>

这是我在确定 next 时所做的一次尝试，但只有当下一个LI是兄弟或直接的孩子时才会有效，但情况并非如此，所以这种方法不是＆＃ 39;真的是一个可行的解决方案。我已经改变主意并且更喜欢顶部的编辑菜单，所以我现在试图确定上面的LI而不是下面的LI。

$(document).on("mouseover", "li", function(e){          
        var li = $(this).closest('li').attr('id');
        var nextLI = $('li.selected > ul:visible > li:first:visible').attr('id');
        if (!nextLI ){
            var nextLI = $('li.selected').nextAll('li:visible:first').attr('id');
        }
        if(li == nextLI ){
            $('.edit-menu li').fadeOut();
        }
    }).on("mouseout", "li", function(e){
        $('.edit-menu  li').fadeIn();
    });

这里是我创造的小提琴，虽然当你将上面的LI，只是下面的LI悬停时，它当前不起作用，而且如果LI不是，那么它将不会起作用。 ta兄弟或直系孩子。 https://jsfiddle.net/8jfLd69b/

Answer 1

看起来应该是not方法和has选择器：

$treeLeaves = jQuery("li").not(":has(li)");

您可以根据需要修改它，例如

$treeLeaves = jQuery("li:visible").not(":has(li)");

可见“叶子”等。

获得“离开”列表后，您可能会找到当前的离开列表。

使用jQuery确定何时将嵌套UL嵌套在上面的元素上

1 个答案: