Question

我正在尝试创建一个导航栏，非常简单，单独弄清楚该怎么做但是有些东西让我头疼。在进一步解释之前，让我告诉你我的代码：

HTML：

<div id="navBar">
<ul class="tiles">  
<li class="tile">
<div class="invDiv">Test</div>
</li>
</ul>
</div>

的JQuery / JS：

$('.tile').mouseenter(function(){
$('.invDiv').show();
});

$('.tile').mouseout(function(){
$('.invDiv').hide();
});

就是这样，真的很简单。因此，当我的鼠标离开我的第一个李并直接进入我的div时，div就会消失。好吧，这是因为我的mouseout函数在.tile ...我明白了，但我怎么能把这样的条件：如果我的.invDiv显示：block，那么组合.tile + .invDiv。只有当你离开.invDiv或.tile ...时才会消失。但是即便如此，如果我的鼠标在我的.invDiv里面，我继续我的.tile，那个.invDiv就会消失！我知道这是一个条件，但如何写它？！

（我希望你们都理解我，我的英语不是那么好!!!谢谢大家。）

Answer 1

据我了解你的问题，我认为这就是你想要的：

http://jsfiddle.net/KX76m/3/

$('.tile').mouseover(function(){
$('.invDiv').show();
});

$('.tile').mouseout(function(){
$('.invDiv').hide();
});

Answer 2

只需使用.toggle（）函数

http://api.jquery.com/toggle/

$('.tile').mouseenter(function(){
    $('.invDiv').toggle();
});

$('.tile').mouseout(function(){
    $('.invDiv').toggle();
});

编写此代码的更好方法是：

$('.tile').on('mouseenter', function(){
    $('.invDiv').toggle();
});

$('.tile').on('mouseout',function(){
    $('.invDiv').toggle();
});

如果您在此div中更改了somenthing，那么您没有任何问题

试图弄清楚如何从导航栏中消除我的隐形div

2 个答案: