使用jquery在悬停时打开下拉菜单答案

【问题标题】：Open dropdown on hover using jquery使用jquery在悬停时打开下拉菜单
【发布时间】：2015-01-08 13:47:02
【问题描述】：

我有一个带有 ul 和 li 标签的下拉菜单。它正在点击。我正在尝试在鼠标悬停而不是单击时打开下拉菜单。我怎样才能做到这一点。

<div class="ms-parent form-control">
    <button type="button">
        <span class="placeholder">Choose Anyone</span>
    </button>

    <div class="ms-drop bottom" style="display: none;">
        <ul>
            <li class="ms-select-all">
            <li>
            <label>
                <input type="checkbox" value="Abu Dhabi" undefined="">
                Computer
            </label>
            </li>
            <li>
            <label>
                <input type="checkbox" value="Al Ain" undefined="">
                Keyboard
            </label>
            </li>
            <li>
        </ul>
    </div>
</div>

输出类似于普通的 html 选择下拉菜单。但我希望在鼠标悬停事件上打开下拉菜单。

【问题讨论】：

使用jquery的hover功能
@MahenderSingh 仅出于这个原因包括 jQuery 是多余的。这可以使用 CSS :hover... 来完成
我相信你当前的标记是无效的。我不相信您可以将 <li> 元素直接嵌套在另一个 <li> 元素中。您可以嵌套一个新的无序列表<ul>，然后在该列表中嵌套新的<li> 元素......
有很多很多关于这些功能的教程。你检查过它们吗？如果是，请提供参考资料或 sn-ps。然后，提及您遇到的问题并寻求社区的帮助。
重复问题 - stackoverflow.com/questions/4599975/…

标签： javascript jquery css

【解决方案1】：

$(document).ready(function(){
  
  
  $('#btnToChoose').hover(
         function () {
           
           $('#content').show();
         }, 
         function () {

         }
     );
  
  

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ms-parent form-control">
    <button type="button" name="btnToChoose" id="btnToChoose">
        <span class="placeholder">Choose Anyone</span>
    </button>

    <div id='content' class="ms-drop bottom" style="display: none;">
        <ul>
            <li class="ms-select-all">
            <li>
            <label>
                <input type="checkbox" value="Abu Dhabi" undefined="">
                Computer
            </label>
            </li>
            <li>
            <label>
                <input type="checkbox" value="Al Ain" undefined="">
                Keyboard
            </label>
            </li>
            <li>
        </ul>
    </div>
</div>

根据您的方便更改设计。

【讨论】：

【解决方案2】：

  $('#btnToChoose')
  .on('mouseenter', function () { $('#content').show(); })
  .on('mouseleave', function () { $('#content').hide(); });

【讨论】：