下拉菜单，下拉导航，JavaScript，html，jQuery的实现代码 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        *{margin: 0;

        padding: 0;

        list-style: none;

        border: 0;}

        #ua1{

            width: 340px;

            height: 30px;

            background:url(./images/bg.jpg);

            margin: 50px auto 0; 

            text-align: center;

            line-height: 30px;

        }

        #ua1 .la{

            width: 100px;

            height: 30px;

            background:url(./images/libg.jpg);

            margin-left:10px;

            float:left;

            position: relative;

        }

        .la ul{

            display: none;

            position:absolute;



        }

        .la li{

            width: 100px;

            height: 30px;

            background:url(./images/libg.jpg);



        }

        #box{height: 500px;

            border: 1px solid #000;}

        

    </style>

     <script src="jquery-3.5.1.js"></script>

</head>



<body>

        <ul id="ua1" >

            <li id="la1" class="la" onmousemove="fn('la1','ub1')"onmouseout="fc('la1','ub1')"><a href="#">目录</a>

                <ul id="ub1"  >

                    <li id="lb1"><a href="#">目录1</a></li>

                    <li id="lb2"><a href="#">目录2</a></li>

                    <li id="lb3"><a href="#">目录3</a></li>

                </ul>

            </li>

            <li id="la2" class="la" onmousemove="fn('la2','ub2')"onmouseout="fc('la2','ub2')"><a href="#">讨论</a>

                <ul id="ub2">

                    <li id="lb1"><a href="#">讨论1</a></li>

                    <li id="lb2"><a href="#">讨论2</a></li>

                    <li id="lb3"><a href="#">讨论3</a></li>

                </ul>

            </li>

            <li id="la3" class="la" onmousemove="fn('la3','ub3')" onmouseout="fc('la3','ub3')"><a href="#">笔记</a>

                <ul id="ub3">

                    <li id="lb1"><a href="#">笔记1</a></li>

                    <li id="lb2"><a href="#">笔记2</a></li>

                    <li id="lb3"><a href="#">笔记3</a></li>

                </ul>

            </li>

        </ul>

        <div id="box">呀呀呀呀呀呀晕嘤嘤呀呀呀呀呀呀呀呀呀呀呀呀有四大行</div>

        <script>

            function fn(la,ub){

                let oLa=document.getElementById(la);

                let oUb=document.getElementById(ub);

                oUb.style.display="block";

            }

            function fc(la,ub){

                let oLa=document.getElementById(la);

                let oUb=document.getElementById(ub);

                oUb.style.display="none";

            }

        </script>

        <!-- <script>

            // jQuery写法一

                $("#ua1 li").hover(function(){

                    $(this).children('ul').slideToggle();

                });

                 // jQuery写法二

                 $('#ua1 li').hover(function(){

                     $(this).children('ul').show();

                 },function(){

                     $(this).children('ul').hide();

                 }) 

                  // jQuery写法三

                  $(function(){

                      $("#ua1 li").mouseenter(function(){

                          $(this).children('ul').show();

                      });

                      $("#ua1 li").mouseleave(function(){

                          $(this).children("ul").hide();

                      });

                  })

        </script> -->

</body>

</html>
posted @ 2020-07-15 20:34  zayyo  阅读(146)  评论(0)    收藏  举报