Wenden Sie CSS-Stil auf Element an, wenn sie angezapft wird, übergeordnete unabhängige

Question

Dieser Meteor-Code verwendet statische Vorlage mit dynamischen Daten. In der Spalte css flexbox werden Elemente wie Absätze und li angezeigt.

Es sollte sein, dass, wenn der Benutzer auf einen Absatz klickt, seine Hintergrundfarbe zu hellgrau "ein ausgewähltes Objekt aus einer Liste simuliert", das funktioniert, aber das Problem ist, dass es zurückgeht, wenn ein li geklickt wird .

Da das Clickereignis durch das Meteor Template Event gehandhabt wird, habe ich Zugriff auf $(event.target), wenn ich mit spielte, würde es den String aber nicht den ganzen "list like" Raum um den String, der schlecht aussieht.

Ich gab einen anderen tabindex Wert für jede "Gruppe" ohne Erfolg. Wie kann ich es zum Funktionieren bringen, so dass der Absatz "ausgewählt" bleibt, wenn ich klicke, um ein li auszuwählen?

Dank

.selectable:focus { 
 
    background-color: lightgray; 
 
} 
 

 
.flex-item { 
 
padding: 0.5em 2%; 
 
border-bottom: 1px solid #333; 
 
} 
 

 
.flex-container { 
 
margin: 1em 0; 
 
display: -webkit-flex; 
 
display: -ms-flexbox; 
 
display: flex; 
 
-webkit-flex-flow: column wrap; 
 
-ms-flex-flow: column wrap; 
 
flex-flow: column wrap; 
 
}

<ul class="sub-menu flex-container"> 
 
     {{#each subMenuItems}} 
 
     <li class="flex-item sub-menu-item selectable" tabindex="1"><h5>{{this}}</h5></li> 
 
     {{/each}} 
 
    </ul> 
 

 
<form class="flex-container"> 
 
{{#each dataItems}} 
 
    <p class="selectable" tabindex="0" data-age={{value.[2]}}> 
 
    <b>{{value.[0]}}</b><br/>{{value.[1]}}<br/>{{value.[3]}} 
 
    </p> 
 
{{/each}} 
 
</form>

Answer 1

Es ist nicht möglich, CSS aus dem Fokus-Zustand zu halten, nachdem ein Benutzer den Fokus auf ein anderes Element geändert hat.

Um die CSS-Änderung beizubehalten, muss dem ausgewählten Element eine zusätzliche Klasse hinzugefügt werden.

Betrachten Sie so etwas wie dies versuchen:

Die background-color-Eigenschaft wird auf dem auswählbaren Element mit der Klasse hinzugefügt, „aktiv“.

.selectable.active { 
    background-color: lightgray; 
} 

Um die „aktive“ Klasse auf das ausgewählte Element wir einige Javascript in unserer Js Datei hinzufügen müssen hinzuzufügen. Beachten Sie, dass "yourTemplate" sollte die entsprechende Vorlage ersetzt werden, die verwendet wird.

Dadurch wird die Hintergrundfarbe auf dem angeklickten Absatz beibehalten, nachdem der Benutzer den Fokus geändert hat.