試圖弄清楚如何從導航欄中消失我的隱形div

我想創建一個導航欄，非常簡單，單獨弄清楚如何做到這一點，但有一件事情讓我頭疼。讓我來解釋進一步之前，告訴你我的代碼：試圖弄清楚如何從導航欄中消失我的隱形div

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(); 
});

就是這樣，reallllly簡單。所以，當我的鼠標離開我的第一個鋰電池並直接進入我的分區時，這個分區會消失。那麼好吧，這是因爲我在.tile上的mouseout函數...我明白，但我怎麼能把這樣的情況：如果我的.invDiv是在顯示：塊，然後組。up + .invDiv。只有當你離開.invDiv或.tile ...時，纔會讓.invDiv消失。但即使如此，如果我的鼠標位於我的.invDiv中，並且我繼續使用我的.tile，那.invDiv消失了！我知道這是一個條件，但如何寫它？！

（我希望你們理解我，我沒有英語那麼好！謝謝大家。）

來源

2013-12-15 user3038607

IIRC使用div的內部列表是無效的HTML。任何人都可以確認嗎？ – feddus

沒問題。李可以有孩子的塊元素。 –

你必須更具體一點。這個innvDiv爲什麼exaclty？是子菜單嗎？那麼父鏈接在哪裏？ –

至於我明白你的問題，我認爲這是你想要什麼：

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

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

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

來源

2013-12-15 19:57:18 Zword

我知道它就是這麼簡單！ +根本沒有js條件，這太棒了！謝謝！ – user3038607

好的。我知道我做錯了什麼。當我今天早上嘗試時，我把「mouseenter」而不是「mouseover」作爲你的第一行。如果你放置「mouseenter」，那麼即使你回到你的初始位置（在這種情況下，第一個li），你的隱形div也會消失。你的第三個函數現在是無用的！ – user3038607

是的，你是對的。我試圖修復早期的代碼，並忘記刪除它，同時保存它。 – Zword

只需使用.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(); 
});

所以你沒有任何問題，如果你改變這個somenthing DIV

來源

2013-12-15 19:59:21

我測試了它，並且存在問題。當您的鼠標移動到「.invDiv」中時，該Div會消失並不斷重現。但是，無論如何感謝:) – user3038607

試圖弄清楚如何從導航欄中消失我的隱形div

回答

相關問題