摘要:<!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>關(guān)于我們</li> <li>反饋</li> </ul> </div> <script> $(document).ready(function () { //隱藏菜單 $('.two').hide(); $('.thr').hide(); //選中對應(yīng)的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名取的太不行了,除了你自己看,別人看會找的眼睛疼啊,取名字最好知名知意
代碼邏輯不清晰,建議:注釋上備注
批改老師:滅絕師太批改時間:2018-11-20 09:31:00
老師總結(jié):第一個問題:this指代當(dāng)前對象
問題改在你的源碼中,你看看……不理解在私聊我