作品第二课----点击切换显示隐藏
2015-12-23 21:58
435 查看
<!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>
相关文章推荐
- 简单-正则表达式贪婪与非贪婪模式
- 手势和长按显示菜单
- mysql kill thread
- 他山之石-sphinx全文检索之PHP使用教程
- JDK下载和环境变量配置
- 深度学习系列(五):一个简单深度学习工具箱
- 作品第一课----获取批量checkbox选中的值
- Android Studio你不知道的调试技巧
- 浅谈MVC分层架构中的层次
- XMPP即时通信资料:
- 一起talk C栗子吧(第八十一回:C语言实例--进程停止)
- swift学习之basic
- tomcat中的server.xml和context.xml配置jndi区别
- 作品第一课----记住密码提示框
- 读C++代码必备专业名词
- maven分模块间依赖注意事项
- iOS9适配总结
- 素数打表
- rac 裸设备
- 最长回文子串