data-toggle = "dropdown" Farbe beim Klick

Question

Ich versuche zu verstehen, was genau data-toggle = "dropdown" in meiner Navigationsleiste tut und es scheint, dass der primäre Zweck für Touchscreen-Oberflächen ist, so dass wenn nav link geklickt wird, bleibt das Menü anders als ein Menü beim Hover geöffnet. (Bitte korrigieren Sie mich, wenn ich falsch liege) zu meinem rudimentären Wissen ändert es den Link zu einem aktiven Link ??

Also basierend auf dem Code unten, wenn ich auf den Navbar Link, der Publikationen ist, klicken, bleibt es hervorgehoben, wie ändere ich die Farbe dieses Highlights?

Welche CSS-Zeile im Bootstrap bearbeite ich?

Danke!

Update:

Mit

.dropdown-Toggle: focus {color: red; text-decoration: none;}

auf seine eigene nicht funktioniert, ich habe 'hinzufügen wichtig 'zu der Zeile sonst wird es nicht wirksam, möglicherweise Konflikt mit dem Bootstrap-Code? Außerdem suche ich nicht die Textfarbe, sondern die Hintergrundfarbe. Hintergrund verwenden: Farbe funktioniert überhaupt nicht für mich.

<li class="dropdown"> 
 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Publications</a> 
 
    <ul class="dropdown-menu"> 
 
    <li><a href="submissions.html">Submissions</a></li> 
 
    <li><a href="news.html">News</a></li> 
 
    <li><a href="coc.html">Code of Conduct</a></li> 
 
    <li><a href="links.html">Useful Links</a></li> 
 
    </ul> 
 
</li>

Answer 1

Ich gehe davon aus, wenn Sie für Farbe suchen bis zu bleiben Ihre dropdown offen ist, sollten Sie Pseudo focus

.dropdown-toggle:focus { 
    color:red; 
    text-decoration: none; 
} 

verwenden Und wenn Sie auf suchen sich ändern , können Sie es mit dem folgenden Code tun.

.dropdown-toggle:hover{ 
    color: green; 
    text-decoration: none; 
} 

Sie können in dem folgenden Beispiel sehen.

Auf hover ist es green und auf focus es red

---

.dropdown-toggle:focus { 
 
    color: red; 
 
    text-decoration: none; 
 
} 
 

 
.dropdown-toggle:hover { 
 
    color: green; 
 
    text-decoration: none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<li class="dropdown"> 
 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Publications</a> 
 
    <ul class="dropdown-menu"> 
 
    <li><a href="submissions.html">Submissions</a></li> 
 
    <li><a href="news.html">News</a></li> 
 
    <li><a href="coc.html">Code of Conduct</a></li> 
 
    <li><a href="links.html">Useful Links</a></li> 
 
    </ul> 
 
</li>