Question

我有一个<ul>，下面有很多<li>个。这些<li>中的每一个都有一个隐藏的<div class=dbox">。 <li>的结构/层次结构及其内容为：

- ＆GT;李
----＆gt;可见内容（h3，img，p等）
----＆gt;隐藏div.dbox
-------＆GT; div.photos
-------＆GT; div.specs

单击<li>的图像（始终可见）时，<div class="dbox">将被赋予display = block。到现在为止还挺好。然后，我在网上搜索，以便在外面点击时关闭.dbox。我得到了这个工作：

var mouse_is_inside = false;

    $('.dbox').hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });

    $("body").mouseup(function(){ 
        if(! mouse_is_inside) $('.dbox').hide();
    });

点击外部.dbox现在关闭它。到现在为止还挺好。下一步是添加一个'关闭此窗口按钮，为不太精通科技的用户，因此，在<div class="specs">内，我添加了最后一个元素，<span class="close">然后给了它这个jquery代码：

$('span.close').click(function() {

        $(this).parent().parent().hide();

    });

哪个不起作用。我和父母（'。dbox'）一起测试过它也没用。有趣的是，只有当我以.dbox为目标时才隐藏不起作用。如果我这样做：

$(this).parent().hide();

会关闭包含div <div class="specs">，它会有效关闭<div class="specs">

然后我认为与“点击外部”代码存在某种冲突，所以我将其删除并且错误仍然存在......这使我在这里向您询问有关这种困境的知识型研究员。

提前致谢 G.Campos

Answer 1

我得到了它的工作：$(this).parents('.dbox').hide(1); 只有当hide（）为空时才会发生任何事情。添加1或任何数字就可以了。为什么不能是0呢？

Answer 2

一种解决方案是，您可以在mouse_is_inside=false;事件处理程序中设置onMouseLeave。

另一个解决方案是连接您的事件处理程序：

$('.dbox').click(function(e) {
  // do stuff
  // ...

  // this will prevent the event from bubbling upto body's eventhandler
  e.stopPropagation();
});

$('body').click(function(e) {
  $('.dbox').hide();
});

此外，这应该关闭父dbox div：

$('.dbox span.close').click(function() {
  $(this).parents('.dbox').hide();
});

Answer 3

您可以使用blur而非mouse_inside的技巧。

此外，您可以使用parents内置选择器代替parent().parent()。

最高

Answer 4

尝试

$(this).parent().parent().parent().hide(); // for button

JQuery Hide Element无效

4 个答案: