javascript - 如何添加仅在单击或悬停时显示的隐藏侧边栏？

Question

我正在尝试在我的网站上添加一个隐藏的侧边栏。这正是我想要实现的目标：http: //demo.themebeans.com/pinto/但我希望它显示在悬停而不是单击中。只是而不是点击...只是希望我的访问者只是悬停在它上面。

这是我到目前为止所拥有的。我希望它的位置与我上面给出的示例相同。:( 有人可以帮忙吗？

#nav{width:200px;height:100%;position:absolute;top:0;left:0;z-index:100;background:#111;color:#fff;overflow:hidden;}
#nav ul{margin:0;padding:0;width:200px;margin:10px;list-style:none;}
#nav a span{margin:0 10px 0 0;}
#nav a{color:#fff;font-size:14px;text-decoration:none;}

jQuery：

$(function(){
$('#nav').hover(function(){
    $(this).animate({width:'200px'},500);
},function(){
    $(this).animate({width:'35px'},500);
}).trigger('mouseleave');
});

HTML：

<div id="nav">
Contents of the sidebar like the one on my sample. 
</div>

http://jsfiddle.net/yztJ8/这是小提琴。

Answer 1

您需要正确设置绝对定位：

#nav { position: absolute; top: 0px; right: 0px; }

只需更改left: 0;-right: 0;这是更新的小提琴：http: //jsfiddle.net/yGBkV/

我强烈推荐你使用hoverIntent插件——用户体验会改善很多：

http://cherne.net/brian/resources/jquery.hoverIntent.html

Answer 2

这是纯 JS 和 jQuery 的混合。

(function() {
    var oNav = document.getElementById('nav');
    oNav.addEventListener('hover', function() {
        $('#nav').fadeIn();
    }, false);
})();

这可能应该工作。

Answer 3

简单地尝试

$('#nav1').bind("mouseenter", function() {
    $('#nav').animate({width:'200px'},500);
});
$('#nav1').bind("mouseleave", function() {
    $('#nav').animate({width:'0px'},500);
});

jsfiddle：http: //jsfiddle.net/yztJ8/5/