Проблема выбора 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

Будьте осторожны, вы перевернули два символа:

<li class="menu_Child>"

должно стать

<li class="menu_Child">

Answer 4

В других ответах отмечена ваша разбитая HTML-разметка.

Единственное, что следует учитывать, - это использовать CSS вместо javascript для выполнения hover. Он не будет работать в IE6, если он не находится на элементе <a>, но будет работать в большинстве других браузеров.

.menu_Child {
   background: yellow;
}

.menu_Child:hover {
   background: orange;
}

Не уверен, какой эффект вы получите, но если вы можете изменить элемент наведения на <a>, он будет работать и в IE6.