欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Bootstrap鼠标悬停展开子菜单

程序员文章站 2023-12-28 21:40:40
...

Bootstrap中的导航条默认鼠标点击才会显示子菜单,可以通过如下脚本修改默认行为,使得鼠标悬停展开子菜单

 <script>
  $(function(){
    //鼠标移入和移出,显示或隐藏子菜单
    $("li.dropdown").mouseover(function () {
      $(this).children(".dropdown-menu").show();
    }).mouseout(function () {
      $(this).children(".dropdown-menu").hide();
    });
    //点击子菜单项的时候隐藏子菜单
    $(".dropdown-item").click(function () {
        $(this).parent(".dropdown-menu").hide();
    });
  });
</script>
相关标签: 前端

上一篇:

下一篇: