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''元素 – 2014-10-18 16:19:31

你的'html'代码中没有'.first-level-menu'。你的意思是'$（'。top-level-menu'）。鼠标... – haxtbh 2014-10-18 16:20:43

这是多么令人尴尬！ :(我写了一个错误的名字！恩，谢谢你的指出。 – dotslash 2014-10-18 16:20:53

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一级菜单。因此mouseenter和mouseleave不起作用。我已经发布作为一个例子工作代码

来源

2014-10-18 16:23:09

谢谢！注意到我几乎尽快将它发布在这里。 XD – dotslash 2014-10-18 16:38:09

Mouseenter事件发生

回答

相关问题