JQuery、BootStrap实现鼠标悬浮出现下拉框

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/jal517486222/article/details/83185992

JQuery、BootStrap实现鼠标悬浮出现下拉框，并且鼠标可以进入下拉框，鼠标离开下拉框后，下拉框隐藏

html 部分(bootstrap):

<li class="dropdown">
      <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1">
           课程
      </a>
      <ul class="dropdown-menu" style="background-color: palegoldenrod !important;" id="dropDownCur">
          <li><a href="#">jmeter</a></li>
          <li><a href="#">jmeter1</a></li>
          <li><a href="#">jmeter2</a></li>
          
      </ul>
</li>

js部分(JQuery实现):

 <script>
    $("#dropdownMenu1").hover(
        function(){
            $("#dropDownCur").show();
    });//为了鼠标可以进入下拉框
    $("#dropDownCur").hover(function() {
        $(this).show();//鼠标进入下拉框
    }, function() {
        $(this).hide();//鼠标离开下拉框后，就会消失
    });
</script>