作品第二课----点击切换显示隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .clk { padding-left: 47%; } .dis { margin: 1% 47%; display: inline-block; border: 1px solid #000; width: 5%; } ul{ list-style: none; padding-left: 0; margin: 0;} li { margin-top: 6px; } li:hover { background-color: yellow; } a { text-decoration: none; } </style> <script src="http://apps.bdimg.com/libs/jquery/1.10.0/jquery.js"></script> </head> <body> <div class="clk"> <button>点击切换</button> </div> <div class="dis"> <ul> <li><a href="javascript:;">搜狗</a></li> <li><a href="javascript:;">百度</a></li> <li class="close"><a href="javascript:;">关闭</a></li> </ul> </div> <script> $(".clk").on("click", function(){ $(".dis").toggle() }); $(".close").on("click", function(){ $(this).parents("div").hide(); }) </script> </body> </html>