在其他地方单击时,Bootstrap下拉菜单没有消失?

时间:2018-06-30 00:48:29

标签: javascript html twitter-bootstrap navbar

如下面的链接所示,在菜单栏上单击时,先前加载的操作的下拉菜单不会消失。

这非常令人沮丧,我不知道是什么原因造成的。如果有人可以帮助我解决问题,我将不胜感激!

(我无法发布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>

1 个答案:

答案 0 :(得分:0)

我发现了问题所在,我包含了两个不同版本的Bootstrap 4.0.0和4.1.1,一旦我删除了旧版本并对其进行了一些修改,它就可以正常工作。