jQuery选择器问题（我认为）

Question

我有下面的脚本

<script type="text/javascript">
    $(document).ready(function () {
        var ChildMenusFound = $(".menu_Child").hover(function () {
            //Mouse Over
                            alert('ok');
            $(this).toggleClass("menu_hover");
        }, function () {
            //Mouse Out
                            alert('ok');
            $(this).toggleClass("menu_hover");
        });
    });
</Script>

我输出的html如下：

<ul alt="" class="menu_Root">
<li class="menu_Child>"
<a href="/Admin" alt="">Admin</a>
<ul alt="" class="menu_Child">
<li class="menu_SubMenu>"
<a href="/Admin/Statistics" alt="">Statistics</a></li>
<li class="menu_SubMenu>"
<a href="/Admin/Database" alt="">Database</a></li>
</ul></li>

<li class="menu_Child>"
<a href="/MyAccount" alt="">My Account</a>
<ul alt="" class="menu_Child">
<li class="menu_SubMenu>"
<a href="/MyAccount/Profile" alt="">Profile</a></li>
</ul></li>

</ul>

调用hover（）之后， ChildMenusFound包含2个元素，firefox没有显示JS错误，但是将鼠标悬停到li元素上/移出该元素不会导致任何事情发生。

有人可以识别我的错误吗？

Answer 1

您的标记已损坏。 标签外有引号。 它也像你错过了一个</li>为第一外某处</li>但它很难说。

Answer 2

您的HTML有点过时，您有未关闭（或错误关闭）的类，如下所示：

<li class="menu_Child>"
                      ^ here

它应该是：

<li class="menu_Child">

这是固定/工作版本 ，但是您可以像这样缩减代码：

$(function () {
  $(".menu_Child").hover(function () {
    $(this).toggleClass("menu_hover");
  });
});

通过将单个回调传递给.hover() ，可以在输入/输出方向上调用该回调，并且由于要切换，因此可以在此处保存代码。

Answer 3

其他答案表明您的HTML标记已损坏。

要考虑的一件事可能是使用CSS而不是javascript进行hover 。 除非它在<a>元素上，否则它将无法在IE6中使用，但在大多数其他浏览器中都可以使用。

.menu_Child {
   background: yellow;
}

.menu_Child:hover {
   background: orange;
}

不确定要达到的效果，但是如果可以将悬停的元素更改为<a> ，那么它也将在IE6中工作。

Answer 4

请注意，您已经颠倒了两个字符：

<li class="menu_Child>"

需要成为

<li class="menu_Child">