<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <link rel="stylesheet" href="base.css" /> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> </head> <body> <style> .t-list{ margin-top: 20px;} .t-list li{ float: left; width: 100px; text-align: center; background: #eee;} .item{ color: #f60; font-weight: bold;} .info{ display: none;} </style> <ul id="list" class="g-w t-list"> <li> <a href="###">列表一</a> <div class="info">菜单一</div> <div class="info">菜单二</div> <div class="info">菜单三</div> <div class="info">菜单四</div> </li> <li> <a href="###">列表二</a> <div class="info">菜单一</div> <div class="info">菜单二</div> <div class="info">菜单三</div> </li> <li> <a href="###">列表三</a> <div class="info">菜单一</div> <div class="info">菜单二</div> </li> <li> <a href="###">列表四</a> <div class="info">菜单一</div> <div class="info">菜单二</div> <div class="info">菜单三</div> <div class="info">菜单四</div> <div class="info">吴者然</div> </li> </ul> <div class="g-w" style="padding-top: 120px;"> <em>阅谁问君诵,水落清香浮。</em> <button class="btn1">请点击这里</button> </div> <div class="g-w" style="padding-top: 60px;"> <span>一站式共享网络</span> <button class="btn2">请点击这里</button> </div> <script> $(function() { // 下拉菜单 downMenu(); demo1(); demo2(); }); function downMenu(){ //bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。 $('#list').find('li').bind({ mouseenter: function(){ $(this).children('a').addClass('item').end().find('.info').show(); }, mouseleave: function(){ $(this).children('a').removeClass('item').end().find('.info').hide(); } }); } function demo1(){ //$(selector).bind(event,data,function) $(".btn1").bind("click",function(){ $("em").slideToggle(); }); } function demo2(){ //$(selector).bind({event:function, event:function, ...}) $(".btn2").bind({ click:function(){$("span").slideToggle();}, mouseover:function(){$("body").css("background-color","#f60");}, mouseout:function(){$("body").css("background-color","#fff");} }); } //拓展阅读:http://onestopweb.iteye.com/blog/2356131 </script> </body> </html>
效果图:
扫描二维码关注公众号,回复:
302535 查看本文章