Событие Mouseenter для стрельбы

Я пытаюсь управлять двухуровневой панелью меню через jQuery. Проблема в том, что мое событие mouseenter не срабатывает.Событие Mouseenter для стрельбы

Вот мой HTML:

<ul class="top-level-menu"> 
     <li>Employees 
      <ul class="second-level-menu"> 
       <li>Add new employee</li> 
       <li>Edit employee details</li> 
      </ul> 
     </li> 

     <li>Attendance 
      <ul class="second-level-menu"> 
       <li>View report</li> 
       <li>Upload attendance</li> 
      </ul> 

     </li> 

     <li>Broadcast</li> 
     <li>Log out</li> 
    </ul>

И JQuery:

<script> 
     $(document).ready(function(){ 

      $('.second-level-menu').hide(); 
      console.log("Hidden!\n"); 

      $('.first-level-menu').mouseenter(function(){ 
       console.log("Mouse enter\n"); 
       $(".second-level-menu", this).show(); 
      }); 

      $(".first-level-menu").mouseleave(function(){ 
       $(".second-level-menu", this).hide(); 
      }); 
     }); 
    </script>

Там нет CSS, как сейчас. Теперь я получаю «Скрытый!». сообщение на консоли, которое показывает, что сценарий получает вызов, но ничего не происходит, когда я перемещаю мышь на элементы верхнего уровня.

Что случилось?

источник

2014-10-18 dotslash

И что должно произойти? Я не вижу никакого элемента '.first-level-menu'' –

В вашем коде' html' нет '.first-level-menu'. Вы имеете в виду '$ ('. Top-level-menu'). Mouse ... – haxtbh

Как волнуешься! :(Я написал неправильное имя! Ну, спасибо, что указали это. – dotslash

first-level-menu класс не существует в HTML-коде. Добавьте его в ul элемент:

<ul class="top-level-menu first-level-menu">...</ul>

Другой исправление в селекторе: выберите li элементы вместо ul:

$('.first-level-menu li').mouseenter(function() { 
    console.log("Mouse enter\n"); 
    $(".second-level-menu", this).show(); 
});

this будет элемент списка.

$(document).ready(function() { 
 

 
    $('.second-level-menu').hide(); 
 
    console.log("Hidden!\n"); 
 

 
    $('.first-level-menu li').mouseenter(function() { 
 
    console.log("Mouse enter\n"); 
 
    $(".second-level-menu", this).show(); 
 
    }); 
 

 
    $(".first-level-menu li").mouseleave(function() { 
 
    $(".second-level-menu", this).hide(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="top-level-menu first-level-menu"> 
 
    <li>Employees 
 
    <ul class="second-level-menu"> 
 
     <li>Add new employee</li> 
 
     <li>Edit employee details</li> 
 
    </ul> 
 
    </li> 
 
    <li>Attendance 
 
    <ul class="second-level-menu"> 
 
     <li>View report</li> 
 
     <li>Upload attendance</li> 
 
    </ul> 
 
    </li> 
 
    <li>Broadcast</li> 
 
    <li>Log out</li> 
 
</ul>

источник

2014-10-18 16:21:45

<body> 
<ul class="top-level-menu"> 
     <li class="first-level-menu">Employees 
      <ul class="second-level-menu"> 
       <li>Add new employee</li> 
       <li>Edit employee details</li> 
      </ul> 
     </li> 

     <li>Attendance 
      <ul class="second-level-menu"> 
       <li>View report</li> 
       <li>Upload attendance</li> 
      </ul> 

     </li> 

     <li>Broadcast</li> 
     <li>Log out</li> 
    </ul> 
<script type="text/javascript"> 
$(document).ready(function(){ 

      $('.second-level-menu').hide(); 
      console.log("Hidden!\n"); 

      $('.first-level-menu').mouseenter(function(){ 
       console.log("Mouse enter\n"); 
       $(".second-level-menu", this).show(); 
      }); 

      $(".first-level-menu").mouseleave(function(){ 
       $(".second-level-menu", this).hide(); 
      }); 
     }); 
</script> 
</body>

У вас нет первого уровня-меню в вашем HTML. Так что мышь и мышь не работают. Я опубликовал в качестве примера рабочий код

источник

2014-10-18 16:23:09

Спасибо! Заметьте, что почти сразу я разместил его здесь. XD – dotslash

Событие Mouseenter для стрельбы

ответ

Смежные вопросы