Bootstrap下拉菜单第一次点击无反应,后面点击正常显示

问题

今天在使用bootstrap的导航栏时,使用了下单菜单,但是出现了一个奇怪的现象,第一次点击下拉菜单时无响应,后面点击时显示正常

分析

可能造成的原因

1. js的加载顺序导致的
2. 下拉菜单没有初始化

解决

第一步:梳理js的加载顺序

<!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<!-- bootstrap -->
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
<!-- 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>

还没有解决的话,继续第二步:初始化下拉菜单,页面加入以下js代码

<script type="text/javascript">
    $(function () {
        // 解决bootstrap下拉菜单第一次点击无反应问题
        $('.dropdown-toggle').dropdown();
    });
</script>