jQuery hover () и состояние наведения должны быть сохранены - PullRequest
Новая
       0

jQuery hover () и состояние наведения должны быть сохранены

0 голосов
/ 01 ноября 2010

Я новичок в jQuery и пробую что-то вроде этого: 

   <ul id="CatNavi">
  <li class="CatLevel1 SubMenue">Top Level 1
    <div class="sub">
      <ul>
         <li class="CatLevel2">Sub Level 1</li>
         <li class="CatLevel2">Sub Level 1</li>
      </ul>
    </div>
  </li>
</ul>

И jquery выглядит так: 

   $(function() { 
 $("li.CatLevel1 a").hover(function() {
   $(this).next("div.sub").slideDown(500);
 },function() {
  $(this).next("div.sub").slideUp(200);
 });
});

Работает отлично.При наведении курсора на Верхний уровень 1 показывается div class = "sub", но я не могу щелкнуть элементы этого div, потому что состояние наведения исчезает.

Что я делаю неправильно?

Привет Рон

Ответы [ 2 ]

0 голосов
/ 01 ноября 2010

Ваша функция должна выглядеть так: 

$(function() { 
  $("#CatNavi li.CatLevel1").hover(function() {
    $(this).children("div.sub").slideDown(500);
  },function() {
    $(this).children("div.sub").slideUp(200);
  });
});

Когда вы выключаете событие <a>, запускается событие mouseleave ... каковым является второй обработчик в этом обработчике .hover(), скрывающий братьев и сестер. mouseleave не срабатывает при вводе дочернего элемента, поэтому наличие при наведении на <li> событий означает, что они не сработают при вводе дочерних <div> / <ul> элементов.

0 голосов
/ 01 ноября 2010

Изменение наведения на работу по ссылке <li>, а не <a>. Это означает, что курсор все еще находится над <li>, пока вы нажимаете на ссылку в подменю. Таким образом, вторая функция наведения запускается только при полном перемещении элемента списка, внутри которого находится подменю. 

$("li.CatLevel1").hover( /* hover code here */ )

Я предполагаю, что приведенный выше HTML-код неверен, и вы имеете в виду наведение курсора на «Верхний уровень 1», который должен быть ссылкой для включения функции наведения в jQuery.

...