-1

我有一个简单的按钮，它在悬停时显示一个列表。

工作示例

我只需要悬停列表内容，就像下拉菜单一样。如何添加脚本来执行该功能？

HTML

<button id="test">Hover Me</button>
<ul class="tester">
  <li>Menu 1</li>
  <li>Menu 2</li>
  <li>Menu 3</li>
  <li>Menu 4</li>
  <li>Menu 5</li>
  <li>Menu 6</li>
  <li>Menu 7</li>
  <li>Menu 8</li>
</ul>

脚本

$(document).ready(function() {

    $("#test").hover(
        function () {
            $('.tester').slideDown(500);
        },
        function () {
            $('.tester').slideUp(500);   
        });
    });
4

4 回答 4

1

与其使用 .hover()，不如在按钮上使用 .mouseenter() 来显示菜单，在菜单上使用 .mouseleave() 来再次隐藏它。

$(document).ready(function(){

  $("#test").mouseenter(function () {
    $('.tester').show();
  });

  $('.tester').mouseleave(function() {
    $(this).hide();
  });

});

在此处编辑您的 jsbin：http: //jsbin.com/iroxop/1/edit

于 2013-04-17T12:19:15.190 回答
0

你想这样做吗？

小提琴

http://jsfiddle.net/EpV87/25/

刚刚使用slideUp()和slideDown()

于 2013-04-17T12:30:37.857 回答
0

听起来您的问题是当您将鼠标悬停在按钮上时菜单会显示，但当您将鼠标悬停在菜单上时会消失。尝试将buttonandul元素包装在 anotherdiv中，将悬停功能附加到该包装器。这个小提琴中的工作示例。

$("#menu").hover(
    function () {
        $('.tester').slideDown(500);
    },
    function () {
        $('.tester').slideUp(500);
    }
);
于 2013-04-17T13:43:34.713 回答
0

我刚刚根据您的要求修改了 Scottie 的代码 

$(document).ready(function(){

      $("#test").mouseenter(function () {
    $('.tester').slideDown(500);
      });

      $('.tester').mouseleave(function() {
        $(this).slideUp(500);   
      });

    });

http://jsfiddle.net/dolours/mTa6j/

于 2013-04-17T12:33:46.903 回答