Question

我正在尝试创建一个具有设置功能的网站，我有这个按钮。我希望选项和其他链接在悬停时显示在下拉菜单中。我有我认为应该有效的代码，但由于某种原因它不起作用。

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>

Answer 1

您有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/

jQuery下拉菜单不起作用

1 个答案: