Bootstrap 3 - navbar Dropdown-Menü noch sichtbar nach der Drop-Down-Schließung - auf Ansichtsfenster <768px

Question

Ich habe versucht, das Problem mit dem navbar Dropdown-Menü zu beheben, wenn Ansichtsfenster kleiner als 768px (mobil/Touchscreen).

Beim Test auf dem Touchscreen sollte ein Klick das Dropdown öffnen (das funktioniert), der zweite Klick soll es schließen (das Schließen des Dropdowns funktioniert, aber auf dem Touchscreen zeigt es immer noch das Dropdown-Menü auf der Seite wie es ist ul.dropdown-menu: hover).

Ich versuche, es ausgeblendet zu haben, nachdem der Dropdown-Schalter zum Schließen geklickt wurde und der Cursor immer noch auf dem Toggle (Touchscreen) schwebt. Hier

ist der Code:

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>

Answer 1

In Ihrem CSS, löschen Sie die folgenden Schritte aus:

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