BootStrap下拉菜单点击不显示效果

---

BootStrap下拉菜单点击不显示效果的原因

不会出现下拉菜单效果的原因？

1. 引入顺序问题

<link href="css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

2. 忘记加入`data-toggle=“dropdown”（可以不加入dropdown-toggle类）

data-toggle是js属性，而dropdown是属性值。data-toggle="dropdown"表示引用js给外层添加一个open类,div class="dropdown"默认没有open,点击一次为div class=“dropdown open”，再点击一次为，以此
如果没有data-toggle="dropdown"的话，即使被定义为dropdown-toggle类，也不能实现动态的菜单下拉和收回的效果

<div class="container">
			<!-- 指定下拉菜单，下拉菜单都包裹在 .dropdown 里 dropdown-toggle状态改变 必须要有 data-toggle="dropdown"才会触发下拉菜单事件-->
			<div class="dropdown">
				<button type="button" class="btn btn-default dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
					下拉菜单
					<!-- 小箭头 -->
					<span class="caret"></span>
				</button>
				<!-- aria-labelledby="dropdownMenu1"可有可无 -->
				<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
					<li><a href="#" role="menuitem">一</a></li>
					<li><a href="#" role="menuitem">二</a></li>
					<li><a href="#" role="menuitem">三</a></li>
					<li><a href="#" role="menuitem">四</a></li>
				</ul>
			</div>
		</div>

另附上菜鸟教程的一些说明