使用 jquery 在悬停时打开下拉列表

Open dropdown on hover using jquery

本文关键字：下拉列表悬停 jquery 使用更新时间：2023-09-26

我有一个带有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 选择下拉列表。但是我希望打开鼠标悬停事件的下拉菜单。

$(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>

根据您的方便更改设计。

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