单击其他地方时，引导下拉菜单不会消失？

Question

如下链接所示，在菜单栏上单击时，先前加载的操作的下拉菜单无法消失。

这非常令人沮丧，我不知道是什么原因造成的。如果有人能很好地引导我完成解决方案，我将不胜感激！

（我无法发布 GIF，因为我没有 10+ 声望。） https://gyazo.com/e8487c706e178c7e8b3ce03fd16d4c2d

<div class ="navbar-wrapper">
   <nav class="navbar navbar-expand-lg">
      <div class ="container">
         <div class = "mr-5">
            <a class="navbar-left" href="index.php"><img src="newreSizedStarIxLogo.jpg"></a>
            <div class = "navbar-right">  
               <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
               <span class="navbar-toggler-icon"></span>
               </button>
            </div>
         </div>
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
               <div class = "mr-5">
                  <li class="nav-item dropdown">
                     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                     1
                     </a>
                     <div class="dropdown-menu" aria-labelledby="navbarDropdown" >
                        <img src = "Imgs/download.png" class = "orangeTriangle">
                        <a class="dropdown-item" href="#">a</a>
                        <a class="dropdown-item" href="#">b</a>
                        <a class="dropdown-item" href="#">c</a>
                     </div>
                  </li>
               </div>
               <div class ="mr-5">
                  <li class="nav-item dropdown">
                     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                     2
                     </a>
                     <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <img src = "Imgs/download.png" class = "orangeTriangle orangeTriangleApplicationsLeftPosition">
                        <a class="dropdown-item" href="#">a</a>
                        <a class="dropdown-item" href="#">b</a>
                        <a class="dropdown-item" href="#">c</a>
                     </div>
                  </li>
               </div>
               <div class ="mr-5">
                  <li class="nav-item dropdown">
                     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                     3
                     </a>
                     <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <img src = "Imgs/download.png" class = "orangeTriangleTechnologyLeftPosition">
                        <a class="dropdown-item" href="#">a</a>
                     </div>
                  </li>
               </div>
               <div class ="mr-5">
                  <li class="nav-item dropdown">
                     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                     4
                     </a>
                     <div class="dropdown-menu" aria-labelledby="navbarDropdown" >
                        <img src = "Imgs/download.png" class = "orangeTriangleServiceLeftPosition">                
                        <a class="dropdown-item" href="#">a</a>
                        <a class="dropdown-item" href="#">b</a>
                        <a class="dropdown-item" href="#">c</a>
                        <a class="dropdown-item" href="#">d</a>
                     </div>
                  </li>
               </div>
               <div class ="mr-5">
                  <li class="nav-item dropdown">
                     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                     5
                     </a>               
                     <div class="dropdown-menu" aria-labelledby="navbarDropdown" >
                        <img src = "Imgs/download.png" class = "orangeTriangle">                
                        <a class="dropdown-item" href="#">a</a>
                        <a class="dropdown-item" href="#">b</a>
                        <a class="dropdown-item" href="#">c</a>
                        <a class="dropdown-item" href="#">d</a>
                     </div>
                  </li>
               </div>
            </ul>
         </div>
      </div>
   </nav>
</div>

Answer 1

我发现了问题所在，我包含了两个不同版本的 bootstrap 4.0.0 和 4.1.1，一旦我删除了旧版本并稍微修改了代码，它就可以正常工作了。