Question

我有一个下拉菜单，所以当用户将鼠标悬停在该按钮上时，他应该获得选项列表而不点击它。这是我的下拉菜单：

<div class="Menu"">
    <div class="btn-group">
        <button type="button" id="someAction" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            Select Action
  <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a class="add">Add</a></li>
            <li><a class="remove">Remove</a></li>
        </ul>
    </div>
</div>

这是我的悬浮代码，但由于某些原因它无效。

$(document).ready(function () {
    $('#someAction').hover(function () {
        $(this).find('dropdown-menu').stop(true, true).delay(200).fadeIn(500);
    }, function () {
        $(this).find('dropdown-menu').stop(true, true).delay(200).fadeOut(500);
    });
}); });

忘记提及点击我应该能够选择该选项

Answer 1

更正您的选择器.dropdown-menu：

         $(document).ready(function () {
            $('#someAction').hover(function () {
                  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
            }, function () {
                  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
            });
         });

你错过了.find()函数中的类选择器点;

更新：第二部分

嗯，这可能是你现在的问题：当你离开按钮时，下拉菜单淡出，所以你不能选择任何选项。

那是因为你的悬停选择器是#someAction。将其更改为.dropdown-menu和#someAction父级：

         $(document).ready(function () {
            $('.btn-group').hover(function () {
                  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
            }, function () {
                  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
            });
         });

以及此作品：

$(document).ready(function () {
            $('.Menu').hover(function () {
            ....

不要忘记在选项点击时fadeOut .dorpdown-menu。

$('.dropdown-menu li a').click(function(){
     $(this).parents('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
})

Answer 2

您的代码无效。按钮中没有.dropdown-menu。使用：

 $('#someAction').hover(function () {
    $('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
  },function(){
     $('.dropdown-menu').stop(true, true).delay(200).fadeOut(500)
 ;})

<强> Working Fiddle

Answer 3

使用类选择器（'。dropdown-menu'）

获取下拉列表

Answer 4

你有2个小错误和1个错误：

HTML双引号的第一个错误：

<div class="Menu"">

应该是：

<div class="Menu">

javascript关闭代码上的第二个错误，错误与您忘记输入.作为css类选择器的选择器：

你做了：

$(document).ready(function () {
  $('#someAction').hover(function () {
    $(this).find('dropdown-menu').stop(true, true).delay(200).fadeIn(500);
  }, function () {
    $(this).find('dropdown-menu').stop(true, true).delay(200).fadeOut(500);
  });
}); 
});//why another close tag? error.

它应该是：

$(document).ready(function () {
  $('#someAction').hover(function () {
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
  }, function () {
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
  });
});

Answer 5

<强> Jsfiddle Demo

你犯了多个错误。

您有一个不必要的});。删除它。
你有一个不必要的双引号菜单div。将其转换为<div class="Menu">
您的按钮不包含下拉菜单。单独选择下拉菜单。

现在你的代码变成了：

<强> HTML：

<div class="Menu">
    <div class="btn-group">
        <button type="button" id="someAction" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            Select Action 
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a class="add">Add</a></li>
            <li><a class="remove">Remove</a></li>
        </ul>
    </div>
</div>

<强>使用Javascript：

$(document).ready(function () {
    $('.dropdown-menu').fadeOut(); //Just hiding dropdown at first for testing purposes.
    $('#someAction').hover(function () {
        $('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
    }, function () {
        $('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
    });
});

Answer 6

在菜单淡出之前，您仍然无法选择任何选项。

为了保持菜单可见，我改变了你的HTML

将id =“someAction”移至父div

<div class="Menu">
    <div class="btn-group" id="someAction" style="float:left">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Select Action 
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" style="display:none">
        <li><a class="add">Add</a></li>
        <li><a class="remove">Remove</a></li>
        </ul>
    </div>
</div>

http://jsfiddle.net/U3VQs/4/

悬停下拉菜单不起作用

6 个答案:

更新：第二部分