三级下拉菜单显示

Original 2018-11-20 00:00:02 257
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>

此代码 有两个问题:

  1. class名取的太不行了,除了你自己看,别人看会找的眼睛疼啊,取名字最好知名知意

  2. 代码逻辑不清晰,建议:注释上备注

Correcting teacher:灭绝师太Correction time:2018-11-20 09:31:00
Teacher's summary:第一个问题:this指代当前对象 问题改在你的源码中,你看看……不理解在私聊我

Release Notes

Popular Entries