abstract:<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewp
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>三级下拉菜单</title> <script src="jquery.js"></script> <style> *{margin: 0; padding: 0; } .cd{ width: 800px; height: 30px; background-color: #00CC66; margin: 0 auto; } ul { list-style: none; } ul li{ width: 100px; height: 30px; line-height: 30px; float: left; cursor: pointer; border-right: 1px solid #ccc; text-align: center; } .tou li{ line-height: 30px; color: #000000; } .two li { width: 100px; height: 30px; line-height: 30px; position: relative; background-color: #00a0e9; text-align: center; } .thr{ position: absolute; top: 0; left: 100px; } </style> </head> <body> <div> <ul> <li>首页</li> <li>在线咨询 <ul> <li>qq客服 <ul> <li>4305555</li> <li>4305555</li> <li>4305555</li> <li>4305555</li> </ul> </li> <li>微信客服</li> <li>淘宝客服</li> </ul> </li> <li>关于我们</li> <li>反馈</li> </ul> </div> <script> $(document).ready(function () { //隐藏菜单 $('.two').hide(); $('.thr').hide(); //选中对应的li,你选择的是最外边div,逻辑就错了 $('.tou>li').mouseover(function () { $('.zxzx').css('color','red'); //选中变色 $(this).find('.two').slideDown(1000) }); $('.tou>li').mouseleave(function () { $('.zxzx').css('color','#000000'); $(this).find('.two').hide(); }); $('.two>li').mouseover(function () { // alert("11"); $(this).find('.thr').slideDown(1000); }); $('.two>li').mouseleave(function () { /*alert("111");*/ $(this).find('.thr').slideUp(500); }); }) </script> </body> </html>
此代码 有两个问题:
class名取的太不行了,除了你自己看,别人看会找的眼睛疼啊,取名字最好知名知意
代码逻辑不清晰,建议:注释上备注
Correcting teacher:灭绝师太Correction time:2018-11-20 09:31:00
Teacher's summary:第一个问题:this指代当前对象
问题改在你的源码中,你看看……不理解在私聊我