This article mainly introduces the usage of jQuery compound events, and analyzes the simple definition and usage of jQuery compound events in the form of specific examples. Friends in need can refer to it. I hope it can help everyone.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>复合事件</title> <style type="text/css" > a{ color:#000; text-decoration:none; } ul{ list-style:none; } ul li{ width:140px; } #menu_1{ border:1px dotted #666; border-top:none; padding:0px 5px 5px 5px; } #menu_1 li{ margin: 5px 0px; } li.fli{ display:block; float:left; padding:0px 10px; } </style> <script src="js/jquery-1.8.3.js" type="text/javascript"></script> <script language="JavaScript"> $(document).ready(function () { $("#myaccound").hover( function () { $("#menu_1").css("display","block"); }, function () { $("#menu_1").css("display","none"); }); }); </script> </head> <body> <p id="nav"> <ul> <li class="fli"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >我的订单</a></li> <li class="fli" id="myaccound"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >我的宜美惠▼</a> <ul id="menu_1" style="display:none;"> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >我的优惠券</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >收藏夹</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >短信息</a></li> </ul> </li> <li class="fli"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >我网站导航▼</a></li> </ul> </p> </body> </html>
The operation effect diagram is as follows:
##Related recommendations:
Usage examples of jQuery compound events combined with toggle()
Related jQuery compound event usage examples
Usage example of jQuery compound event combined with toggle() method
The above is the detailed content of Detailed explanation of jQuery compound events. For more information, please follow other related articles on the PHP Chinese website!