Bootstrap V4 realizes automatic pull-down menu Author: Chuwen Time: 2018-06-10 Classification: Bootstrap comment <trans data-src="# 1. "># 1. </trans> <trans data-src="前言">preface</trans> <trans data-src="> [现在网][1] 原创，换成 `Bootstrap V4` 后，好多在 `Bootstrap V3` 能用 `JavaScript` 实现的效果都变了，暂时未在官方文档找到 `JavaScript 插件` 的用法，只能自己乱搞一下了">>[Xianzai] [1] is original. After changing to 'Bootstrap V4', many of the effects that can be achieved with 'JavaScript' in 'Bootstrap V3' have changed. The use of 'JavaScript plug-in' has not been found in the official document for the time being, so I have to mess with it myself</trans> <trans data-src="# 2. "># 2. </trans> <trans data-src="使用 `JavaScript 实现`">Implement using ` JavaScript`</trans> <trans data-src="## 2-1. ">## 2-1. </trans> <trans data-src="需引入 `Bootstrap V4` 的 `bootstrap.js` 或 `bootstrap.min.js`(压缩版) 和 `jQuery.js`">You need to import 'bootstrap. js' or' bootstrap. min. js' (compressed version) and 'jQuery.js' of' Bootstrap V4 '`</trans> <trans data-src="### `JavaScript` 代码如下：">###The 'JavaScript' code is as follows:</trans> <trans data-src="```javascript">```javascript</trans> <trans data-src="$('li.nav-item.dropdown').mouseover(function() {">$('li.nav-item.dropdown').mouseover(function() {</trans> <trans data-src="/*当鼠标经过时下拉(打开)*/">/*Pull down (open) when the mouse passes*/</trans> <trans data-src="$(this).addClass('show');">$(this).addClass('show');</trans> <trans data-src="$(this).children([2]).addClass('show');">$(this).children([2]).addClass('show');</trans> <trans data-src="}).mouseout(function() {">}).mouseout(function() {</trans> <trans data-src="/*当鼠标离开时时合起(关闭)*/">/*Close (close) when the mouse leaves*/</trans> <trans data-src="$(this).removeClass('show');">$(this).removeClass('show');</trans> <trans data-src="$(this).children([2]).removeClass('show');">$(this).children([2]).removeClass('show');</trans> <trans data-src="});">});</trans> <trans data-src="```">```</trans> <trans data-src="### 效果图：">###Renderings:</trans> <trans data-src="!">!</trans> <trans data-src="[QQ截图20180610164616.png][2]">[QQ screenshot 20180610164616. png] [2]</trans> <trans data-src="# 3. "># 3. </trans> <trans data-src="实例">example</trans> <trans data-src="> 粘贴就可以查看效果了">>Paste to see the effect</trans> <trans data-src="> HTML 在线运行：">>HTML online run:</trans> <trans data-src="http://www.runoob.com/runcode">http://www.runoob.com/runcode</trans> <trans data-src="```html">```html</trans> <trans data-src="<!"><!</trans> <trans data-src="doctype html>">doctype html></trans> <trans data-src="<html lang="zh-CN">"><html lang="zh-CN"></trans> <trans data-src="<head>"><head></trans> <trans data-src="<meta charset="utf-8">"><meta charset="utf-8"></trans> <trans data-src="<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"></trans> <trans data-src="<meta name="description" content="现在工具网">"><meta name="description" content="Now Toolnet"></trans> <trans data-src="<meta name="author" content="陈文州">"><meta name="author" content="Chen Wenzhou"></trans> <trans data-src="<title>现在工具网</title>"><title>Now Tool Net</title></trans> <trans data-src="<link href=""><link href="</trans> <trans data-src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.min.css">https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.min.css</trans> <trans data-src="" rel="stylesheet">">" rel="stylesheet"></trans> <trans data-src="</head>"></head></trans> <trans data-src="<body>"><body></trans> <trans data-src="<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">"><nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"></trans> <trans data-src="<a class="navbar-brand" href="#">现在工具网</a>"><a class="navbar brand" href="#">Now Toolnet</a></trans> <trans data-src="<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">"><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"></trans> <trans data-src="<span class="navbar-toggler-icon"></span>"><span class="navbar-toggler-icon"></span></trans> <trans data-src="</button>"></button></trans> <trans data-src="<div class="collapse navbar-collapse" id="navbarsDefault">"><div class="collapse navbar-collapse" id="navbarsDefault"></trans> <trans data-src="<ul class="navbar-nav mr-auto">"><ul class="navbar-nav mr-auto"></trans> <trans data-src="<li class="nav-item active">"><li class="nav-item active"></trans> <trans data-src="<a class="nav-link" href="./">首页</a>"><a class="nav link" href="./">Home Page</a></trans> <trans data-src="</li>"></li></trans> <trans data-src="<li class="nav-item">"><li class="nav-item"></trans> <trans data-src="<a class="nav-link" href="/login">登陆账号</a>"><a class="nav link" href="/login">Login account</a></trans> <trans data-src="</li>"></li></trans> <trans data-src="<li class="nav-item">"><li class="nav-item"></trans> <trans data-src="<a class="nav-link" href="/register">注册账号</a>"><a class="nav link" href="/register">Register an account</a></trans> <trans data-src="</li>"></li></trans> <trans data-src="<li class="nav-item dropdown">"><li class="nav-item dropdown"></trans> <trans data-src="<a class="nav-link dropdown-toggle" href="" id="more_website" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">旗下网站</a>"><a class="nav link dropdown tag" href="" id="more_website" data tag="dropdown" aria haspopup="true" aria expanded="false">subordinate websites</a></trans> <trans data-src="<div class="dropdown-menu" aria-labelledby="more_website">"><div class="dropdown-menu" aria-labelledby="more_website"></trans> <trans data-src="<a class="dropdown-item" href=""><a class="dropdown-item" href="</trans> <trans data-src="https://nowtime.cc">https://nowtime.cc</trans> <trans data-src="" target="_blank">现在网|个人博客</a>">"Target=" _blank ">Xianzai | Personal blog</a></trans> <trans data-src="<a class="dropdown-item" href=""><a class="dropdown-item" href="</trans> <trans data-src="https://nowtool.cn">https://nowtool.cn</trans> <trans data-src="" target="_blank">现在工具网</a>">"Target=" _blank ">Now Toolnet</a></trans> <trans data-src="</div>"></div></trans> <trans data-src="</li>"></li></trans> <trans data-src="<li class="nav-item dropdown">"><li class="nav-item dropdown"></trans> <trans data-src="<a class="nav-link dropdown-toggle" href="" id="more_website" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">旗下网站</a>"><a class="nav link dropdown tag" href="" id="more_website" data tag="dropdown" aria haspopup="true" aria expanded="false">subordinate websites</a></trans> <trans data-src="<div class="dropdown-menu" aria-labelledby="more_website">"><div class="dropdown-menu" aria-labelledby="more_website"></trans> <trans data-src="<a class="dropdown-item" href=""><a class="dropdown-item" href="</trans> <trans data-src="https://nowtime.cc">https://nowtime.cc</trans> <trans data-src="" target="_blank">现在网|个人博客</a>">"Target=" _blank ">Xianzai | Personal blog</a></trans> <trans data-src="<a class="dropdown-item" href=""><a class="dropdown-item" href="</trans> <trans data-src="https://nowtool.cn">https://nowtool.cn</trans> <trans data-src="" target="_blank">现在工具网</a>">"Target=" _blank ">Now Toolnet</a></trans> <trans data-src="</div>"></div></trans> <trans data-src="</li>"></li></trans> <trans data-src="</ul>"></ul></trans> <trans data-src="<form class="form-inline my-2 my-lg-0">"><form class="form-inline my-2 my-lg-0"></trans> <trans data-src="<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">"><input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"></trans> <trans data-src="<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>"><button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button></trans> <trans data-src="</form>"></form></trans> <trans data-src="</div>"></div></trans> <trans data-src="</nav>"></nav></trans> <trans data-src="<script src=""><script src="</trans> <trans data-src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js">https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js</trans> <trans data-src=""></script>">"></script></trans> <trans data-src="<script src=""><script src="</trans> <trans data-src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js">https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js</trans> <trans data-src=""></script>">"></script></trans> <trans data-src="<script>"><script></trans> <trans data-src="$('li.nav-item.dropdown').mouseover(function() {">$('li.nav-item.dropdown').mouseover(function() {</trans> <trans data-src="/*当鼠标经过时下拉(打开)*/">/*Pull down (open) when the mouse passes*/</trans> <trans data-src="$(this).addClass('show');">$(this).addClass('show');</trans> <trans data-src="$(this).children([2]).addClass('show');">$(this).children([2]).addClass('show');</trans> <trans data-src="}).mouseout(function() {">}).mouseout(function() {</trans> <trans data-src="/*当鼠标离开时时合起(关闭)*/">/*Close (close) when the mouse leaves*/</trans> <trans data-src="$(this).removeClass('show');">$(this).removeClass('show');</trans> <trans data-src="$(this).children([2]).removeClass('show');">$(this).children([2]).removeClass('show');</trans> <trans data-src="});">});</trans> <trans data-src="</script>"></script></trans> <trans data-src="</body>"></body></trans> <trans data-src="</html>"></html></trans> <trans data-src="```">```</trans> <trans data-src="[1]: ">[1]: </trans> <trans data-src="https://nowtime.cc">https://nowtime.cc</trans> <trans data-src="[2]: ">[2]: </trans> <trans data-src="https://cdn.nowtime.cc/2018/06/10/2583050693.png">https://cdn.nowtime.cc/2018/06/10/2583050693.png</trans>