移动和chrome上的引导程序下拉菜单问题

bootstrap dropdown menu issue on mobile and chrome

本文关键字:引导程序 下拉菜单 问题 chrome 移动      更新时间:2023-09-26

我有这个菜单,它运行得很好,但从昨天起,它就不能在chrome和移动平台上运行了。我根本没有更改代码中的任何内容。

问题是当我点击init时,菜单会关闭。

这是我的代码:

<header id="top">
  <div class="header-top">
    <div class="headerBG"></div>
    <div class="container bposi">
      <h1 id="logo"> <a title="MIR" href="#"> <img title="" alt="" src="images/kkkk.png"> </a> </h1>
      <div class="navbar-header navBox">
        <div>
          <button data-target=".navbar-main-collapse" data-toggle="collapse" class="navbar-toggle" type="button"> </button>
          <a title="Login" id="btnLoginRes" href="#" class="btn btn-login btn-loginMobile "><span>Login</span></a>
          <div class="navbar-collapse navbar-main-collapse collapse " aria-expanded="true" style="">
            <ul class="navigation" id="mainNav">
              <li class="hasSubMenu" ><a title="Products" data-toggle="dropdown" aria-expanded="true" href="#"><span>Products</span></a>
                <ul class="dropdown-menu">
                  <li><a href="http://www.google.com" title=""><img alt="" src="images/img" /><strong>1</strong></a></li>
                  <li><a href="#" title=""><img alt="" src="images/img1.png" /><strong>2</strong></a></li>
                  <li><a href="#" title=""><img alt="" src="images/img2.png" /><strong>3</strong></a></li>
                  <li><a href="#" title=""><img alt="" src="images/img3.png" /><strong>4</strong></a></li>
                </ul>
              </li>
              <li><a title="Softwares" href="#"><span>Softwares</span></a></li>
              <li><a title="Info" href="#"><span>Info</span></a></li>
              <li><a title="Contact" href="#"><span>Contact</span></a></li>
              <li  class="hasSubMenu subMenudownload"><a title="Downloads" data-toggle="dropdown" aria-expanded="true" href="#"><span>Downloads</span></a>
                <ul class="dropdown-menu">
                  <li><a href="#" title=""><img alt="" src="images/img-1.png" /><strong>1</strong></a></li>
                  <li><a href="#" title=""><img alt="" src="images/img-2.png" /><strong>2</strong></a></li>
                  <li><a href="#" title=""><img alt="" src="images/img-3.png" /><strong>3</strong></a></li>
                </ul>
              </li>
              <li class="hasSubMenu"><a title="English" href="#" data-toggle="dropdown" aria-expanded="true"><span>English</span></a>
                <ul class="dropdown-menu noImg">
                  <li><a href="#" title=""><strong>English</strong></a></li>
                  <li><a href="#" title=""><strong>Arabic</strong></a></li>
                </ul>
              </li>
              <li><a title="Search" href="#" class="icon-search" id="btnSearch"><span>Search</span></a></li>
            </ul>
          </div>
          <input id="fieldSearch" type="text" class="input-text" placeholder="Search " />
          <a title="Search" href="#" class="icon-close" id="btnClose"><span>&nbsp;</span></a>
          
      </div>
    </div>
  </div>
  </div>
</header>
<script language="javascript" type="text/javascript" src="js/jquery.js"></script> 
<script language="javascript" type="text/javascript" src="js/bootstrap.js"></script>

固定

将此添加到我的css中,它现在运行良好

.dropdown-backdrop {
  display: none;
}