Question

我的代码中有一个小问题，我不知道如何解决它。

这是一个详细评论的小提琴：http://jsfiddle.net/4aZbp/

基本上，我有一个元素列表，当你悬停每个元素时，会显示一个“+”图标。

当您点击该按钮时，会出现一个小菜单。

该菜单不在 li 内，它是我在jQuery定位页面顶部的绝对隐藏菜单。所以，所有元素都有一个菜单。

在用户鼠标移动<li>之前，该菜单应保持打开状态。到目前为止，这么好，

我的问题是，当用户尝试单击INSIDE该菜单时，它需要保持打开状态。我不能让它工作，因为菜单在div之外，它需要保持在那里。

任何解决方案？请检查小提琴

http://jsfiddle.net/4aZbp/

$(document).ready( function() {

    // Position the menu & show it at the right place when you click on the "+" button

    $(".open-playlist-link").click(function() {       
        var offset = $(this).offset();
        var offsetTop = Math.round(offset.top);
        var offsetLeft = Math.round(offset.left);

        var menu = $('.add-to-playlist-menu');

        menu.css( {
            top : offsetTop +20,
            left : offsetLeft }
        );
        menu.toggleClass('display-none');      
    });

    // Hide the "+" button when you leave the wrapper of the <li> 

    $(".wrap").mouseenter(function() {
            $(this).children('.add-to-playlist-icon').removeClass('display-none');
        }).mouseleave(function(){
            $(this).children('.add-to-playlist-icon').addClass('display-none');
    });

    // Hide the menu when you leave the wrapper, but you need to be able to click the link inside the menu. When you leave the menu, we hide it. ISSUE HERE.

    $('.wrap').mouseleave(function(){
        $('.add-to-playlist-menu').addClass('display-none');
    });
});

Answer 1

假设使其成功运行的最简单方法是将菜单移至li。

Here还没有完全完成演示，但它应该很容易添加所需的行为（比如在LI离开后隐藏菜单）

主要更新在此处（新行$(this).parent().append(menu);并删除了css定位）：

  $(".open-playlist-link").click(function() {       
        var offset = $(this).offset();
        var offsetTop = Math.round(offset.top);
        var offsetLeft = Math.round(offset.left);

        var menu = $('.add-to-playlist-menu');    

        menu.toggleClass('display-none');      
        $(this).parent().append(menu);
    });

由于菜单div不在LI内 - 只要您将鼠标移动到菜单div，就会发生该事件。为了避免这种情况，您应该在LI内设置菜单div（实际上，div.wrap根据提供的代码）。

在mouseEnter / Leave上显示/隐藏绝对菜单

1 个答案: