Bootstrap V4 实现自动下拉菜单 作者: Chuwen 时间: 2018-06-10 分类: Bootstrap 评论 # 1. 前言 > [现在网][1] 原创，换成 `Bootstrap V4` 后，好多在 `Bootstrap V3` 能用 `JavaScript` 实现的效果都变了，暂时未在官方文档找到 `JavaScript 插件` 的用法，只能自己乱搞一下了 # 2. 使用 `JavaScript 实现` ## 2-1. 需引入 `Bootstrap V4` 的 `bootstrap.js` 或 `bootstrap.min.js`(压缩版) 和 `jQuery.js` ### `JavaScript` 代码如下： ```javascript $('li.nav-item.dropdown').mouseover(function() { /*当鼠标经过时下拉(打开)*/ $(this).addClass('show'); $(this).children([2]).addClass('show'); }).mouseout(function() { /*当鼠标离开时时合起(关闭)*/ $(this).removeClass('show'); $(this).children([2]).removeClass('show'); }); ``` ### 效果图： ![QQ截图20180610164616.png][2] # 3. 实例 > 粘贴就可以查看效果了 > HTML 在线运行：http://www.runoob.com/runcode ```html <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="现在工具网"> <meta name="author" content="陈文州"> <title>现在工具网</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <a class="navbar-brand" href="#">现在工具网</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarsDefault"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="./">首页</a> </li> <li class="nav-item"> <a class="nav-link" href="/login">登陆账号</a> </li> <li class="nav-item"> <a class="nav-link" href="/register">注册账号</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="" id="more_website" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">旗下网站</a> <div class="dropdown-menu" aria-labelledby="more_website"> <a class="dropdown-item" href="https://nowtime.cc" target="_blank">现在网|个人博客</a> <a class="dropdown-item" href="https://nowtool.cn" target="_blank">现在工具网</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="" id="more_website" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">旗下网站</a> <div class="dropdown-menu" aria-labelledby="more_website"> <a class="dropdown-item" href="https://nowtime.cc" target="_blank">现在网|个人博客</a> <a class="dropdown-item" href="https://nowtool.cn" target="_blank">现在工具网</a> </div> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <script> $('li.nav-item.dropdown').mouseover(function() { /*当鼠标经过时下拉(打开)*/ $(this).addClass('show'); $(this).children([2]).addClass('show'); }).mouseout(function() { /*当鼠标离开时时合起(关闭)*/ $(this).removeClass('show'); $(this).children([2]).removeClass('show'); }); </script> </body> </html> ``` [1]: https://nowtime.cc [2]: https://cdn.nowtime.cc/2018/06/10/2583050693.png