bootstrap navbar "blinkt", wenn Sie außerhalb des Menüs klicken, um es zu schließen

Ich habe ein Problem mit der Navbar, wo ein "Flash" erscheint, wenn Sie außerhalb des Menüs klicken, um das Menü zu schließen. Der Blitz bleibt, wenn die Maus gedrückt gehalten wird, wenn aus dem Menü klicken, wie hier gezeigt:bootstrap navbar "blinkt", wenn Sie außerhalb des Menüs klicken, um es zu schließen

Ich denke, es könnte etwas mit Winkel zu tun hat, und nicht die CSS, vor allem, weil andere versagt haben um es auf Geige zu replizieren.

HTML:

<nav class='navbar navbar-default.navbar-static-top navbar-custom'> 
    <div class='container-fluid'> 
    <ul class='nav navbar-nav navbar-left'> 
     <li><a href="dashboard.html">Dashboard</a></li> 
     <li><a href="/grades">Grades</a></li> 
     <li><a href="/classes">Classes</a></li> 
    </ul> 
    <ul class='nav navbar-nav navbar-right'> 
     <li><a href="/messages"><i class="fa fa-envelope fa-lg"></i></a></li> 

     <!--has to do with the link, clicking it and clicking it again--> 
     <li><a class="dropdown-toggle dropdown-custom" data-toggle="dropdown" href="/profile"><i class="fa fa-user fa-lg"></i></a> 
     <ul class="dropdown-menu"> 
      <li><a href="/profile.html">Edit profile</a></li> 
      <li><a href="/settings">Edit Preferences</a></li> 
     </ul> 
     </li> 
     <li><a href="/logout"><i class="fa fa-power-off fa-lg"></i></a></li>  
    </ul> 

    </div> 
</nav>

CSS:

[ng\:cloak], [ng-cloak], .ng-cloak { 
    display: none !important; 
} 
.navbar-custom { 
    background-color: #586F7C; 
} 
.navbar-custom a { 
    color: #F4F4F9; 
} 
.navbar-custom .nav > li > a:hover { 
    background-color: #2F4550; 
} 
.navbar .navbar-nav > li.open > a, { 
    background-color: #586F7C; 
} 
.navbar .navbar-nav > li.open > a:hover, 
.navbar .navbar-nav > li.open > a:focus { 
    background-color: #2F4550; 
} 
.nav >li > a:hover, .nav > li > a:focus { 
    background-color: #586F7C; 
}

ng-umfassen in der Datei wird die navbar verweist in

<div ng-include="'html/navbar.html'"></div>

Teil index.html wo es die Referenzen Datei, dass die Navbar ng-enthalten ist in

<body> 
<div class="view-container"> 
    <div ng-view class="view-frame"></div> 
</div> 
</body>

Ich denke, das Problem könnte mit der ng-View oder ng-include sein, jedoch bisher keine der Korrekturen in der vorherigen Frage gearbeitet.

Quelle

2016-03-28 Left

[Können Sie eine Plunker erstellen] (https://plnkr.co)? – Vucko

Wow, ich habe gerade das Problem beim Erstellen eines Plumpser gefunden. Vielen Dank! – Left

Die Frage war hier:

.navbar .navbar-nav > li.open > a, { 
    background-color: #586F7C; 
}

Das gewisse Extra "" war das Problem. Am Ende war es nur ein Syntaxfehler, wie peinlich haha. Kein Wunder, dass es schien als würde alles funktionieren, es war nur ein kleines Komma am falschen Ort!

Quelle

2016-03-30 19:34:25 Left

Eine schnelle Hack kann dies zu Ihrem CSS werden, indem

.nav >li > a:hover, .nav > li > a:focus { 
    background-color: #586F7C; 
}

Edit: Ich habe gerade realisiert man bereits eine solche Lösung in einem anderen Thread gesehen habe, aber ich war in der Lage „Ihr Fehler“ zu replizieren. Here is a bootply, versuchen Sie einfach, das CSS zu kommentieren und der Fehler wird vorhanden sein, mit CSS, es funktioniert wie erwartet.

Quelle

2016-03-30 09:10:23 Buksy

Ich habe eigentlich schon genau dieses CSS in meinem Stylesheet, aber irgendwie funktioniert das nicht an meinem Ende. :( – Left

Ein kleines jQuery löst das Problem. Fügen Sie für die blinkenden Anker-Tags einfach Folgendes hinzu.

`` `

$('.navbar-custom .navbar-nav li a').on('mouseup', function(){ 
     $(this).blur(); 
    });

` ``

Quelle

2017-07-27 13:48:09

bootstrap navbar "blinkt", wenn Sie außerhalb des Menüs klicken, um es zu schließen

Antwort

Verwandte Themen