jquery - 创建像 RDP 菜单栏这样的 jquery 下拉菜单

Question

我对 jquery 不是很熟悉，所以我不太确定如何做到这一点。基本上，我希望一个 html 块保持隐藏在页面顶部，并有大约 3px 的边缘伸出（鼠标悬停的东西），当你将鼠标悬停在它上面时，隐藏的部分会向下滑动。

基本上我希望它像 RDP 全屏菜单栏一样工作。对这样做的最佳方法有什么想法吗？

Answer 1

感谢您的回复。通过对上面的代码稍加调整，我发现了 .hover() 方法的上方。上面的javascript看起来像

$("#slide").hover(function () {
            $(this).animate({
                top: '+=30'
            });
        }, function () {
            $(this).animate({
                top: '-=30'
            });
        });

Answer 2

jQuery：

$("#slide").bind("mouseover", function() {
     $(this).animate({
          top: '+=189'                      
     });
}).bind("mouseout", function() {
     $(this).animate({
          top: '-=189'                      
     });
});

风格：

   <style type="text/css">
   #slide {
     background:#ccc;
     border:1px solid #000;
     width:200px;
     height:200px;
     padding:10px;
     position:absolute;
     top:-190px;
     }
  </style>

html:

<div id="slide">
test<br>
test<br>
test<br>
test
</div>

Answer 3

你应该能够在 Jquery UI 的帮助下做到这一点

http://jqueryui.com/demos/hide/ 在下拉菜单中选择幻灯片。