点击时在元素上应用css样式，独立于父级

Question

此Meteor代码使用带有动态数据的静态模板。css flexbox列用于显示段落和li等元素。

应该是，当用户点击一个段落时，它的背景色会变为浅灰色，"模拟列表中的选定项目"，这很有效，但问题是，当点击li时，它会变回白色。

由于点击事件是由Meteor模板事件处理的，我可以访问$(event.target)，当我玩它时，它会高亮显示字符串，但不会显示字符串周围的整个"列表状"空间，这看起来很糟糕。

我为每个"组"给出了不同的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更改，必须在所选元素中添加一个额外的类。

考虑试试这样的东西：

背景色属性将添加到类为"active"的可选元素中。

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

要将"active"类添加到所选元素，我们需要在.js文件中添加一些javascript。请注意，"yourTemplate"应替换为正在使用的适当模板。

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

这将在用户更改焦点后保留单击段落的背景色。