javascript - 点击时在元素上应用 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');
    }
});

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