點擊時在元素上應用css樣式，獨立於父級

Question

此流星代碼將靜態模板與動態數據一起使用。 css flexbox列用於顯示諸如段落和li之類的元素。

應該是，當用戶單擊一個段落時，其背景顏色變為淺灰色的“模擬列表中的選定項目”，這是可行的，但問題是，當單擊li時它會變回白色。

由於click事件是由Meteor模板事件處理的，因此我可以訪問$(event.target) ，當我玩它時，它將突出顯示String，但不會突出顯示看起來很糟糕的字符串周圍的整個“列表類似”空間。

我為每個“組”提供了不同的tabindex值，無濟於事。 當我單擊以選擇li時，如何使其起作用以使段落保持“選定”狀態？ 謝謝

 .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

用戶將焦點更改為另一個項目后，無法從焦點狀態保留css。

為了保留CSS更改，必須將其他類添加到所選元素。

考慮嘗試這樣的事情：

將background-color屬性添加到具有“ active”類的selectable元素中。

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

要將“活動”類添加到所選元素，我們需要在.js文件中添加一些javascript。 請注意，“ yourTemplate”應替換為所使用的適當模板。

Template.yourTemplate.events({
    'click .selectable': function (event) {
        $(event.target).addClass('active');
    }
});

用戶更改焦點后，這將保留所單擊段落的背景色。