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元素的mouseover / out不会导致任何事情发生。

有人可以说出我的错误吗？

Answer 1

您的标记已损坏。你在标签外面有引号。看起来你错过了第一个外</li>的某处</li>，但这很难说。

Answer 2

你的HTML有点不对，你有这样的类未闭合（或错误关闭）：

<li class="menu_Child>"
                      ^ here

应该是：

<li class="menu_Child">

Here's the fixed/working version，您可以减少代码，例如：

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

只有一个回传传递给.hover()，它会在两个进/出方向上调用，而且由于您正在切换，因此可以在此处保存代码。

Answer 3

其他答案注意到您的HTML标记已损坏。

要考虑的一件事可能是使用CSS代替javascript来执行hover。它不适用于IE6，除非它位于<a>元素上，但它将在大多数其他浏览器中使用。

.menu_Child {
   background: yellow;
}

.menu_Child:hover {
   background: orange;
}

不确定您的效果是什么，但如果您可以将悬停元素更改为<a>，它也可以在IE6中使用。

Answer 4

小心，你倒两个字符：

<li class="menu_Child>"

需要成为

<li class="menu_Child">

JQuery Selector问题（我认为）

4 个答案: