jquery - 在嵌套列表上应用 jquery-ui droppable

Question

我正在尝试在嵌套列表上使用 jquery droppable，对悬停时 li 的背景颜色进行更改。问题是它仅适用于列表中的第一项。不过，警报仍然会警告列表项中的文本。有什么想法为什么会发生这种情况吗？

  $("#mailbox li").droppable({
   greedy: true,
   hoverClass: 'mailbox-hover',
   drop: function(event, ui) {
    alert($(this).text());
   }
  });

[编辑] 在某些测试中，警报工作正常，正在应用悬停类(根据 fireBug)，但当我将鼠标悬停在第一个元素上时，它只会更改文本颜色。

<ul id="mailbox" class="filetree">
  <li>
    <span class="folder">imap@gazler.com
    </span>
    <ul>
      <li id="0-INBOX">
        <span class="folder">
        </span>
        <a href="#" onclick="changeFolder('0', 'INBOX', 'INBOX');" name="INBOX">INBOX
        </a>
        <ul>
          <li id="0-INBOX-Drafts">
            <span class="file">
            </span>
            <a href="#" onclick="changeFolder('0', 'INBOX.Drafts', 'Drafts');" name="INBOX.Drafts">Drafts
            </a>
          <li id="0-INBOX-Sent">
            <span class="file">
            </span>
            <a href="#" onclick="changeFolder('0', 'INBOX.Sent', 'Sent');" name="INBOX.Sent">Sent
            </a>
          <li id="0-INBOX-Trash">
            <span class="folder">
            </span>
            <a href="#" onclick="changeFolder('0', 'INBOX.Trash', 'Trash');" name="INBOX.Trash">Trash
            </a>
            <ul>
              <li id="0-INBOX-Trash-New">
                <span class="file">
                </span>
                <a href="#" onclick="changeFolder('0', 'INBOX.Trash.New', 'New');" name="INBOX.Trash.New">New
                </a>
            </ul>
        </ul>
    </ul>
  </li>

[css 是注释] - 另外，可能相关，可能是 css 错误，它不会让我在悬停时设置 li 的背景颜色，只能设置字体颜色。

.mailbox-hover
{
    background-color: #0000ff;
}
.mailbox-dropped
{
    color: #ffff00;
}

[已解决] - 最后，即使所有列表项都附加了 ID，它也不会让我发出警报 ($(this).id)。

Answer 1

此警报:

alert($(this).attr("id"));

这适用于 CSS:

#mailbox li { background-color: #ffffff; } 
#mailbox li.mailbox-hover { background-color: #0000ff;} 
.mailbox-dropped { color: #ffff00; }

在我们处理...更简单的格式化过程中，我将继续更新此答案。