Question

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

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

根据您的方便更改设计。

Answer 2

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

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

2 个答案: