显示/隐藏脚本不起作用

我不知道我的脚本有什么问题。如果我徘徊它，为什么。内幕消失？如果在内部悬停，我希望它可见。显示/隐藏脚本不起作用

<ul class="drop"> 
    <li class="thumb"> 
     Arival 
     <ul class="inside"> 
      <li>První</li> 
     </ul> 
    </li> 
</ul>

一些jQuery的位置：

$("li.thumb").hover(
    function() { $(this).children().show(); }, 
    function() { $(this).children().hide(); } 
);

上http://jsfiddle.net/0s7gd6g3/

来源

2015-02-11 Zcela Anonymní

它不工作，因为一旦你离开“Arival”，子菜单消失，所以你没有机会到达它们。我认为你可能需要重组你想如何工作 – 2015-02-11 10:01:00

我认为你需要'$（this）.children（'。inside'）' – Satpal 2015-02-11 10:02:36

嵌套子工作消失，因为有li.thumb和ul.inside元素之间的间隙。当鼠标在这个区域子菜单隐藏，当然因为.thumb不再徘徊，并且绝对定位了.inside。

要解决它，你可以降低子菜单的top位置，而是用填充顶值垂直方向移动：

.inside { 
    border: 1px white solid; 
    display: none; 
    position: absolute; 
    width: 190px; 
    top: 37px; 
    left: -2px; 
    z-index: 10; 
}

演示：http://jsfiddle.net/0s7gd6g3/8/

而且你并不真正需要的JavaScript在这种情况下，因为它的简单和更有效的CSS用例：

li.thumb:hover .inside { 
    display: block; 
}

来源

2015-02-11 10:04:25 dfsq

你需要增加拇指div的高度，这样当你悬停时，它仍然存在，否则它将被限制在那个空间。

所以添加这个类：

.thumb { 
    height:100px 
}

Working Fiddle

来源

2015-02-11 10:05:08 V31

$(".drop").hover(
    function() { 
     $(this).find('.inside').show(); 
    }, function() { 
     $(this).find('.inside').hide(); 
    } 
);

如果你想有一个jQuery的修复，这会为你做它。只是改变了触发隐藏/显示的元素

来源

2015-02-11 10:05:09

这不是很好的建议，因为可以有多个嵌套的子菜单'.inside'。 – dfsq 2015-02-11 10:08:33

但是随着OP提出的情况，这是一个有效的解决方案 – 2015-02-11 10:09:39

当然，真的，只是指出了可能的陷阱。 – dfsq 2015-02-11 10:13:04

显示/隐藏脚本不起作用

回答

相关问题