单击下一个表行后，突出显示的行不会消失

Question

我需要创建黄色的背景，当选择表行中菜单选项的齿轮图标时，我尝试了下面的代码来突出显示表行。

var view = Core.view.Menu.create({
    model: model,
    menuContext: { ibmm: ibmm },
    anchor: this.$(),
    highlight: this.$().parents('tr:first').css('background-color','yellow')
});
view.show();

从带有齿轮图标的表行(隐藏)中选择菜单时，背景颜色显示良好。

对应的html文件如下

<tr id="ember23242" class="ember-view content-row body-row-view container-view" tabindex="0" aria-label="">

但是当我移动到下一个表行(非隐藏)时，过去的表行颜色仍然是黄色，而不是消失。

当我单击行时，我使用下面的css代码来创建突出显示

table.content-table.highlighted tr.content-row:focus {
  background: #FFFF99 none 0 0 repeat;
}

有没有人能给我推荐一下代码。我正在使用Ember 1.4.0。

Answer 1

你可以尝试下面的jquery来重置你的背景颜色，在那里事件将在焦点输出时发生。

$(function(){
  $("table.content-table.highlighted tr.content-row").on("focusout", function(){
        $(this).css('background','#FFFF00 none 0 0 repeat'); // change color code as per your need
  });
});

Answer 2

检查:first和:first-child之间的差异

var view = Core.view.Menu.create({
    model: model,
    menuContext: { ibmm: ibmm },
    anchor: this.$(),
    highlight: this.$().parents('tr:first-child').css('background-color','yellow')
});
view.show();