0

大家好，我在我的第一个网站上工作，我正在尝试使用jquery.

这是迄今为止得到的：

         <a href="javascript:void(0);"onmouseover="ShowBox();" onmouseout="HideBox();"">Show box<a>
         <script type="text/javascript">
         function ShowBox()
         {
           $("#SlideMenu").slideDown();   
         }
         function HideBox()
         {
           $("#SlideMenu").slideUp();
         }
         </script>

当我将鼠标悬停在控件上时，我的菜单会向下滑动，但会自动向上滑动。我想要的是让用户有时间从菜单中选择和选项，如果他没有，我希望在鼠标离开控件后立即关闭菜单。

知道为什么这不起作用吗？提前致谢。

4

4 回答 4

2

在没有内联 JS 的情况下做你的事情，并记住关闭<a>元素并使用准备好的函数

<a id="test">Show box</a>

<script type="text/javascript">
   $(document).ready(function() {
      $("#test").on({
          mouseenter: function() {
             $("#SlideMenu").slideDown();
          },
          mouseleave: function() {
             $("#SlideMenu").slideUp();
          },
          click: function(e) {
             e.preventDefault();
          }
      });
   });
</script>

小提琴

于 2012-05-09T00:27:13.663 回答
1

当您使用 jQuery 时，我相信使用类似以下内容对您会有所帮助：

$("#box").hover(
   function() {
      //.stop() to prevent propagation
      $(this).stop().animate({"bottom": "200px"}, "fast");                   
   },
   function() {
      $(this).stop().animate({"bottom": "0px"}, "fast");                  
   }
);

这意味着当鼠标悬停在菜单上时，菜单将保持在其打开位置。当鼠标退出菜单时，它会关闭。显然更改 id 和动画 CSS 值以满足您的需要 :)！

这是一个工作示例：http: //jsfiddle.net/V3PYs/1/

于 2012-05-09T00:22:00.143 回答
1

这里真的没有问题 - 脚本完全按照您的指示执行。但是，据我了解，如果用户的鼠标现在位于菜单上方，则当您离开“触发器”元素时，您想要菜单保持打开状态。试试这个：

<script type="text/javascript">
var timeout=250;//timeout in milliseconds to wait before hiding the menu
var menuMouseout;
$(document).ready(function() {
    $("#trigger").hover(function(){
        $("#SlideMenu").slideDown();
    }, function(){
        menuMouseout=setTimeout("$('#SlideMenu').slideUp();", timeout);
    });

    $("#SlideMenu").hover(function(){
        clearTimeout(menuMouseout);
    }, function(){
        menuMouseout=setTimeout("$('#SlideMenu').slideUp();", timeout);
    });
});
</script>

这样，用户在将鼠标移出触发元素后会离开一段时间才能进入菜单。您可能需要摆弄超时，但这应该可行。我对此进行了测试，似乎可以正常工作。如有必要，请确保将其包装起来$(document).ready以确保所有元素都已加载并准备就绪。

演示：http ://www.dstrout.net/pub/menu.htm

于 2012-05-09T00:35:32.197 回答
0

如果您使用的是 jQuery，这将是正确的方法：

<a href="#" id="showBoxHref">Show box</a>

<script type="text/javascript">
    $("#showBoxHref").hover(function() {
        $(this).slideDown();
    }, function() {
        $(this).slideUp();
    });
</script>

（只需复制/粘贴它就可以了）

于 2012-05-09T00:21:51.107 回答