jQuery 选择器问题

Question

编辑：由于以下解决方案不起作用，我添加了更多代码以使其清晰。

我正在动态生成以下 html。它基本上是一个定位的跨度，以便每当单击 ProductControl 时，productMenuHolder div 都会弹出一个菜单。鼠标离开后，菜单消失。

<span class="productControl">
    <div class="productMenuHolder" style="display:none;">
        <ul class="productMenuList">
            <li class="productMenuItem">Menu Item 1</li>
            <li class="productMenuItem">Menu Item 2</li>
            <li class="productMenuItem">Menu Item 3</li>
        </ul>
    </div>
</span>

下面是弹出菜单并在鼠标离开菜单区域时隐藏菜单的 jQuery 示例。

    //shows the hover image 
    $(".productControl").live('hover',function (){$(this).toggleClass("productControl_hover");});

    //pops the menu when productControl is clicked
    $(".productControl").live('click',function(){$(this).find('.productMenuHolder').show();});

    //hides the menu when the mouse leaves the menu
    $('.productMenuHolder').live('mouseleave',function() {$(this).hide();});

    //what i want is to hide the menu when a list item is clicked, however none of the solutions (e.g. closest, find, parent) seem to hide it!
    $('.productMenuHolder li').live('click',function(){ 
    //why are none of the solutions hiding it?
        $(this).closest('.productMenuList').hide();
        $(this).closest('.productMenuHolder').hide();
    });

Answer 1

只需执行 $('.box').hide();

如果这不起作用，那么您是否尝试在代码中添加警报以查看事件是否正在触发？

或者尝试两个父母，因为苹果是 ul 的孩子，然后你就进入了盒子。

它还取决于您在什么时候创建实时代码。如果您在文档加载时创建它，那么它应该可以工作。但是，如果您在创建“.box”时创建它，那么它将无法工作，因为它尚未执行。

Answer 2

这是最好的方法：

$('.apple').live('click', function() { 
    $(this).closest(".box").hide();
});

但是使用 parents 也应该可以工作（区别在于：它还会隐藏 DOM 树上的 .boxes）。如果它不起作用，我们可能需要查看您的更多代码。

Answer 3

使用 .closest()。

$('.apple').live('click',function(){
   $(this).closest('.box').hide();
});

---

或者在 ul 的所有 li 中使用 class="fruits"

$('.fruits li').live('click',function(){
   $(this).closest('.box').hide();
});

---

更新的答案

//pops the menu when productControl is clicked
$('.fruits li').live('click',function(e){ // pass e as parameter...
   e.stopPropagation();
   $(this).closest('.box').hide();
});

使用 .stopPropagation() 阻止其父级调用其点击处理程序，即 $(".productControl").live('click',function(){...}); 使其再次显示...

---

另一个更新

$(".productControl").live('click',function(e){
   if ($(e.target).is('li')) return; // <-- add this line...
   //... other codes
});