0

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

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

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

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

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

该菜单应保持打开状态，直到用户将鼠标离开<li>. 到现在为止还挺好，

我的问题是当用户尝试单击该菜单时它需要保持打开状态。我无法让它工作，因为菜单在 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');
    });
});​
4

1 回答 1

0

假设让它像你想要的那样工作的最简单方法是将菜单移动到li.

这里还没有完全完成演示，但添加所需的行为应该很容易（比如在 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，就会发生该事件。为避免这种情况，您应该在里面有菜单 div LI（实际上，div.wrap根据提供的代码）。

于 2012-10-29T14:30:14.167 回答