[英]jQuery Dropdown Menu Not Working
我正在嘗試使網站具有設置功能,並且我有此按鈕。 我希望將這些選項和其他鏈接懸停在下拉菜單中。 我有我認為應該可以使用的代碼,但是由於某些原因它無法使用。
Javascript,CSS和HTML:
$(document).ready(function(){ $('#settings').mouseenter(function(){ $('#settingDrop').css('visibilty', 'visible'); }); $('#settingDrop, #settings').mouseleave(function(){ $('#settingDrop').css('visibilty', 'hidden'); }); });
#settings { width: 40px; background-image: url(http://cdn.flaticon.com/png/256/23171.png); background-repeat: no-repeat; background-size: 40px 40px; background-color: #F0F0F0; bottom: 0px; position: relative; height: 30px; background-position: center; float:left; } #settingDrop { position: absolute; width: 200px; height: 300px; background-color: #F0F0F0; float:left; top:55px; visibility: hidden; } .navbar { margin-left: width: 170px; padding: 10px 5px 10px 5px; text-align: center; display: inline-block; margin-right: 30px; height: 30px; }
<div id = 'settings' class='navbar'></div> <div id = 'settingDrop'></div>
您對visibility
有錯字。
$(document).ready(function(){
$('#settings').mouseenter(function(){
$('#settingDrop').css('visibility', 'visible');
});
$('#settingDrop, #settings').mouseleave(function(){
$('#settingDrop').css('visibility', 'hidden');
});
});
需要注意的是,對於較短的代碼,使用CSS display:none
和jQuery show(milliseconds)
和hide(milliseconds)
更快,您甚至可以通過使用時間對其進行動畫處理,如下所示:
$(document).ready(function(){
$('#settings').mouseenter(function(){
$('#settingDrop').show(500);
});
$('#settingDrop, #settings').mouseleave(function(){
$('#settingDrop').hide(500);
});
});
與fadeIn(milliseconds)
和fadeOut(milliseconds)
並更改visibility:hidden
以display:none
。
*編輯*
這是為了讓菜單在幾秒鍾后消失(在這種情況下為2,以毫秒為單位)為2000:
$(document).ready(function(){
$('#settings').click(function(){
$('#settingDrop').fadeIn(500);
});
$('#settingDrop, #settings').mouseleave(function(){
var time = setInterval(function(){
$('#settingDrop').fadeOut(500);
clearInterval(time);
}, 2000);
});
});
這是更新的小提琴: http : //jsfiddle.net/xp4rfLbL/2/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.