Bootstrap下拉菜单简单使用

先上代码看看结构:

<div class="contain header">
			<div class="row">
				<div class="col-6">
					<img class="biaoti_img" src="../../img/homeimg/homeima%20(1).png">
				</div>
				<div class="col-6" class="dropdown">
					<img class="right_img" src="../../img/homeimg/homeima%20(2).png">
					<svg t="1611546925772" class="icon dropdown-toggle" data-toggle="dropdown" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2579"
					 width="40" height="40">
						<path d="M492.752593 492.468148H310.613333c-100.408889 0-182.139259-81.73037-182.139259-182.139259s81.73037-182.139259 182.139259-182.139259 182.139259 81.73037 182.13926 182.139259v182.139259zM310.613333 170.761481c-76.894815 0-139.472593 62.577778-139.472592 139.472593s62.577778 139.472593 139.472592 139.472593h139.472593V310.234074c0-76.894815-62.577778-139.472593-139.472593-139.472593zM714.24 492.468148H532.100741V310.234074c0-100.408889 81.73037-182.139259 182.139259-182.139259s182.139259 81.73037 182.139259 182.139259-81.635556 182.234074-182.139259 182.234074z m-139.472593-42.666667h139.472593c76.894815 0 139.472593-62.577778 139.472593-139.472592s-62.577778-139.472593-139.472593-139.472593-139.472593 62.577778-139.472593 139.472593v139.472592zM310.613333 896.094815c-100.408889 0-182.139259-81.73037-182.139259-182.139259s81.73037-182.139259 182.139259-182.13926h182.13926V713.955556c0 100.408889-81.73037 182.139259-182.13926 182.139259z m0-321.611852c-76.894815 0-139.472593 62.577778-139.472592 139.472593s62.577778 139.472593 139.472592 139.472592 139.472593-62.577778 139.472593-139.472592V574.482963H310.613333zM714.24 896.094815c-100.408889 0-182.139259-81.73037-182.139259-182.139259V531.816296h182.139259c100.408889 0 182.139259 81.73037 182.139259 182.13926s-81.635556 182.139259-182.139259 182.139259zM574.767407 574.482963V713.955556c0 76.894815 62.577778 139.472593 139.472593 139.472592s139.472593-62.577778 139.472593-139.472592-62.577778-139.472593-139.472593-139.472593H574.767407z"
						 p-id="2580" fill="#0f284b"></path>
					</svg>
					<div class="dropdown-menu">
						<a class="dropdown-item" style="touch-action: none;" href="../Home/Home.html">首页</a>
					  <a class="dropdown-item" href="../Service/service.html">我的服务</a>
					  <a class="dropdown-item" href="../ContactUs/contactus.html">联系我们</a>
					  <a class="dropdown-item" href="../AboutUs/aboutus.html">关于我们</a>
					</div>
				</div>
			</div>
		</div>

实现主要需要在最外层父级加上class="dropdown"这个类,然后在你需要点击的地方添加 类dropdown-toggle和data-toggle="dropdown",最后下拉内容的部分要加上类dropdown-menu就实现了.

当然别以为这样就可以了,重点还是要注意bootstrap插件有没有引用正确,并且引用顺序要严格.实现下拉菜单功能就要像这样引用:

<script src="../../js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../vanzon/bootstrap/js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../vanzon/bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

这里的顺序必须要先引 jq再引bundle,最后才是bootstrap.js.执行顺序不对会报各种各样的错 铭记