abstrakt:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>三級下拉菜單</title> <script type="text/javascript" src="jq
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>三級下拉菜單</title> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <script type="text/javascript"> function unfold(li) { $(li).children("ul").show(); }; function fold(li) { $(li).children("ul").hide(); } //隱藏所有ul $(document).ready(function(){ $("div ul li ul").hide(); }); </script> </head> <body> <div style="width:200px;height:100px" > <ul><!-- 一級菜單 --> <li><a href="">首頁</a></li> <li onmousemove="unfold(this)" onmouseout="fold(this)"> <!-- 使用onmousemove和onmouseout實現(xiàn)鼠標(biāo)移上時展開下拉菜單,鼠標(biāo)移開時收縮下拉菜單功能 --> <a href="">編程語言</a> <ul><!-- 二級菜單 --> <li onmousemove="unfold(this)" onmouseout="fold(this)"> <a href="">JavaScript</a> <ul><!-- 三級菜單 --> <li><a href="">jQuery</a></li> <li><a href="">AJAX</a></li> <li><a href="">JSON</a></li> </ul> </li> <li><a href="">C/C++</a></li> <li><a href="">C#</a></li> </ul> </li> <li onmousemove ="unfold(this)" onmouseout="fold(this)" > <a href="">人工智能</a> <ul> <li><a href="">機器學(xué)習(xí)</a></li> <li><a href="">深度學(xué)習(xí)</a></li> <li><a href="">語音識別</a></li> </ul> </li> <li onmousemove="unfold(this)" onmouseout="fold(this)"> <a href="">移動開發(fā)</a> <ul> <li><a href="">iOS</a></li> <li><a href="">微信開發(fā)</a></li> <li><a href="">Android</a></li> </ul> </li> </ul> </div> </body> </html>
使用onmousemove和onmouseout實現(xiàn)鼠標(biāo)移上時展開下拉菜單,鼠標(biāo)移開時收縮下拉菜單功能。
Korrigierender Lehrer:天蓬老師Korrekturzeit:2018-12-06 13:13:45
Zusammenfassung des Lehrers:本題主要是考察對鼠標(biāo)移動事件的處理, 這些事件可以實現(xiàn)很多有用的功能