JQ坑1

来源：互联网发布：新日铁住金软件怎么样编辑：程序博客网时间：2024/05/18 05:17

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.dropdown{width: 64px;height: 20px;}.dropdown a{text-decoration: none;color: #000;display: inline-block;}.dropdown>a{border: 1px solid #000;padding: 6px 12px;}.dropdown-menu{width: 105px;list-style: none;margin:0;padding: 0;box-shadow: 5px 5px 6px #000;height: 0;overflow: hidden;transition: .2s;}.dropdown-menu a{padding: 6px 20px;width: 160px;}.dropdown-menu li:hover{background: #ddd;}</style></head><body><h1>下拉菜单</h1><div class="dropdown"><a data-toggle="dropdown" href="">Dropdown</a><ul class="dropdown-menu"><li><a href="#">选项1</a></li><li><a href="#">选项2</a></li><li><a href="#">选项3</a></li><li><hr></li><li><a href="#">选项4</a></li></ul></div><script src="js/jquery.min.js"></script><script>$("[data-toggle=dropdown]").parent().mouseover(function(){//this会指冒泡出的那个，不会变|也是指.前的对象(parent())//console.log("this="+this.className);$(this).children(".dropdown-menu").css({height:152,border:"1px solid #000"});}).mouseout(function(){$(this).children(".dropdown-menu").css({height:0,border:""});})</script></body></html>

阅读全文

0 0