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事件發生

回答

相關問題