javascript - 使用 JQuery 构建非常具体的菜单

Question

我有一个 HTML 表格，定义如下:

  <table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td class="item1a">&nbsp;</td>
      <td class="item2a">&nbsp;</td>
      <td class="item3a">&nbsp;</td>
      <td class="item4a">&nbsp;</td>
      <td class="item5a">&nbsp;</td>
      <td class="item6a">&nbsp;</td>
      <td>Some addition content that is not a menu</td>
    </tr>
  </table>             

每个单元格都有自己的项目，因为这些内容的内容和宽度各不相同。例如，这是与 item1a 关联的 CSS

.item1a {height:36px; width:84px; background-image:url(/resources/images/item1a.png);}
.item1b {height:36px; width:84px; background-image:url(/resources/images/item1b.png);}

当有人将鼠标悬停在单元格上时，我需要将类从 a 更改为 b。我非常有信心我知道该怎么做。我真正的问题是，我不知道如何在该项目下方弹出菜单。由于图形的特殊性，我需要使用这种表格结构。有人可以帮我吗？我该如何解决这个问题？

谢谢!

Answer 1

假设您的类 item1a、item2a... 是拼写错误，并且您打算输入 item1 a

$('td').hover(hoverIn, hoverOut); //make your more selector more specific 

function hoverIn() {
  $this = $(this);
  $this.removeClass('a').addClass('b');
  var hoverMenu = '<div class="hoverMenu">Rest of the HTML needed for the menu</div>';
  $this.append(hoverMenu);
}

function hoverOut() {
  $this = $(this);
  $this.removeClass('b').addClass('a');
  $this.children('.hoverMenu').remove();
}

悬停时切换类并将 DIV 添加到 TD 底部。您可以移动它以满足您的需要。