Question

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

应该是当用户点击一个段落时，它的背景颜色变为浅灰色＆＃34;模拟列表中的一个选定项目＆＃34;，这有效，但问题是当它返回到白色时单击一个li。

由于点击事件是由Meteor模板事件处理的，因此我可以访问$(event.target)，当我玩游戏时，它会高亮显示字符串而不是整个＆＃34;列表，如＆＃34;字符串周围的空间看起来很糟糕。

我为每个＆＃34;组提供了不同的tabindex值＆＃34;无济于事。我怎样才能使它工作，以便段落保持＆＃34;选择＆＃34;当我点击选择一个李？感谢

＆＃13;

.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;
}

＆＃13;

    <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>

＆＃13;

Answer 1

用户将焦点更改为其他项目后，无法从焦点状态保留css。

为了保留CSS更改，必须在所选元素中添加一个附加类。

考虑尝试这样的事情：

background-color属性被添加到具有类的可选元素中，＆＃34;活动＆＃34;。

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

添加＆＃34;有效＆＃34;我们需要在我们的.js文件中添加一些javascript。请注意＆＃34; yourTemplate＆＃34;应该替换正在使用的相应模板。

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

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

在点击时对元素应用css样式，父独立

1 个答案: