选择“列表悬停”下拉

Question

我正在查看答案：jQuery下拉悬停菜单

首先，非常感谢那里提供的答案。我能够在工作中不断发展的工具中实现此功能，用来为用户提供更轻松的工作方式。

但是，我有一个问题，我不想在上一个论坛上列出作为答案...这不是应该使用论坛的方式。

在此工具上（我上面提到的），此工具中还有一些<select>下拉列表，用户表示他们希望将下拉列表下降到鼠标上。因此，我修改了此代码以显示：

$(".DDM").hover(function() {
  $(this).find('ul, select').stop(true, true).slideDown('medium');
}, function() {
  $(this).find('ul, select').stop(true, true).slideUp('medium');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="DDM">
  <select class="DDM">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
</div>

它不起作用，所以我想我的第一个问题是：可以选择列表悬停下拉列表而不将其从<select>更改为<li> ??

Answer 1

您可以获取项目数并调整大小：

$('.DDM').hover(function(){
var count = $(this).children().length;
$(this).attr('size', count);
},
function(){
$(this).removeAttr('size');
});

如果您有太多选择，则可能必须限制尺寸。

Answer 2

是的，很常见，您会看到使用<ul>和<li>标签创建的下拉菜单，但是<div>或<select>可以随附相同的功能（带有调整）。您应该选择一种方法并坚持下去，直到您有更多这种互动经验为止。尝试，

 $(".myClass").on( {
    'mouseenter':function() { $('#myMenu').slideToggle(); },
    'mouseleave':function() { $('#myMenu').slideToggle(); }
});

这将切换包括子元素的下拉菜单。