关闭下拉列表后，Bootstrap 3 - 导航栏下拉菜单仍然可见 - 在视口<768px上

问题描述 投票：0回答：1

当使用小于768px的视口（移动/触摸屏）时，我一直在尝试使用导航栏下拉菜单解决问题。

在触摸屏上测试时，一次点击应该打开下拉列表（这样可以正常工作），第二次点击应该关闭它（关闭下拉列表工作，但在触摸屏上它仍然显示侧面的下拉菜单，就像它是ul .dropdown-menu：悬停）。

单击下拉切换以关闭后，我试图隐藏它，并且光标仍然悬停在切换（触摸屏）上。

Bootstrap dropdown issue

这是代码：

html {
  background-color: #f0f0f0;
}

body {
  font-size: 20px;
  color: #3B3B3B;
  background-color: #f0f0f0 !important;
}

#logo-top {
  padding: 20px 10px 30px 0px;
}

nav.navbar {
  background: #285d97;
  height: 55px;
  margin-bottom: 0px;
}

.navbar-header {
  height: 50px;
}

span.fa-anchor {
  color: #FFFFFF;
  font-size: 24px;
  border: 1px solid #FFFFFF;
  padding: 4px 7px;
  border-radius: 5px;
  margin-top: -8px;
}

ul.navbar-nav {
  margin-left: -45px;
}

#active-nav a {
  background: #FFF;
  color: #285d97;
  border-bottom: 2px solid #22548b;
}

.navbar-nav li a {
  background: #285d97;
  color: #FFF;
  margin-left: 30px;
}

.navbar-nav li a:hover {
  color: #111111;
}


/*adjust Navbar to center*/

.navbar-nav {
  width: 100%;
  text-align: center;
}

ul.navbar-nav li {
  float: none;
  display: inline-block;
}


/*adjust END*/

ul.dropdown-menu {
  background-color: #4474a8;
}

ul.dropdown-menu li a {
  background-color: #4474a8
}

ul.dropdown-menu li a:hover {
  background-color: #4474a8;
  color: #111111!important;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

a.dropdown-toggle:focus {
  color: #2f1b09;
}

.dropdown-link {
  text-align: center;
  background-color: #4474a8;
  color: #FFFFFF !important;
}

#banner {
  height: 380px;
  padding: 60px;
  background-image: url(https://static.pexels.com/photos/547114/pexels-photo-547114.jpeg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-bottom: 10px solid #285d97;
}

#bannerCol2R {
  padding: 160px 0px 10px 10px;
}

.orange {
  background: rgba(254, 81, 38, 1);
  color: #FFF;
  text-align: center;
  font-family: 'Tinos', serif;
  font-weight: 700;
  width: 300px;
}

.orange:hover {
  cursor: pointer;
  color: white;
  text-decoration: none;
  border: 3px solid #F0F0F0;
}

.pillboxLarge {
  padding: 6px 60px;
  border-radius: 6px;
  font-size: 36px;
}

.pillboxMedium {
  padding: 7px 13px;
  border-radius: 4px;
  font-size: 20px;
}


/* Small Devices, Tablets */

@media only screen and (max-width: 768px) {
  #logo-top {
    display: none;
  }
  nav.navbar {
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 5;
    height: auto;
    overflow: hidden;
  }
  ul.navbar-nav {
    margin-top: 0px;
    width: auto;
  }
  .navbar-collapse.in {
    overflow: hidden;
  }
  ul.navbar-nav li {
    float: none;
    display: block;
  }
  .pillboxLarge {
    padding: 5px 40px;
    border-radius: 6px;
    font-size: ;
  }
  #bannerCol2R {
    text-align: center;
  }
  .authorLink {
    position: static;
  }
}

@media only screen and (max-width: 550px) {
  .authorLink {
    position: absolute;
  }
}

@media only screen and (max-width: 480px) {
  #main {
    background: #F0F0F0;
    max-width: 1800px;
    padding: 0px 20px 10px 20px;
  }
  #banner {
    height: 250px;
    padding: 60px;
    background-image: url(image/cruise_jobzz_Job_banner.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-bottom: 10px solid #285d97;
  }
  #bannerCol2R {
    padding: 110px 0px 0px 0px;
  }
  .pillboxLarge {
    padding: 4px 30px;
    border-radius: 6px;
    font-size: 26px;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-1"></div>
      <div class="col-md-10">
        <img src="#" class="img-responsive center-block" id="logo-top">
      </div>
      <div class="col-md-1"></div>
    </div>
  </div>


  <nav class="navbar">

    <div class="container-fluid">

      <div class="navbar-header">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="fa fa-anchor"></span>                   
      </button>

      </div>


      <div class="navbar-collapse collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="active" id="active-nav"><a href="#">Home</a></li>
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">MENU 1<span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#" class="dropdown-link"><i class="fa fa-ship" aria-hidden="true"></i> SUBMENU 1</a></li>
              <li><a href="#" class="dropdown-link"> SUBMENU 2</a></li>
              <li><a href="#" class="dropdown-link"> SUBMENU 3<b>&#36;</b></a></li>
              <li><a href="#" class="dropdown-link"> SUBMENU 4</a></li>
            </ul>
          </li>
          <li><a href="#">MENU 2</a></li>
          <li><a href="#">MENU 3</a></li>
          <li><a href="#">MENU 4</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-camera" aria-hidden="true"></i> MENU 5<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#" class="dropdown-link">Photos</a></li>
              <li><a href="#" class="dropdown-link">Video</a></li>
              <li><a href="#" class="dropdown-link"><i class="fa fa-youtube" aria-hidden="true"></i>YouTube</a></li>
            </ul>
          </li>

        </ul>
      </div>
    </div>

  </nav>

  <!-- @ #banner-->
  <div class="container-fluid" id="banner">
    <div class="row">

      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6" id="bannerCol1L">

      </div>
      <!-- / #bannerCol1L -->

      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6" id="bannerCol2R">
        <a class="orange pillboxLarge" id="getstarted">BUTTON</a>
      </div>
    </div>
    <!-- / .row -->
  </div>
  <!-- / .container-fluid  #banner -->

</body>
twitter-bootstrap-3 drop-down-menu navbar visible touchscreen
1个回答
1
投票

在CSS中，删除以下内容：

.dropdown:hover .dropdown-menu {
    display: block;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.