Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 下拉框练习
Blogger Information
Blog 8
fans 0
comment 0
visits 8394
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
下拉框练习
努力努力再努力
Original
871 people have browsed it

模仿php中文网的导航

学习体会：

1.定位，如果li标签不设置定位属性，则下拉框会使相邻的li标签位置发生偏移

2.事件监听：addEventListener()绑定鼠标移入移出事件

3.如果被绑定者也就是ev.currentTarget是li标签的话 在鼠标移出的时候会发生事件冒泡，导致被绑定的li标签也会隐藏，此时需要设置一个判断条件ev.target.nodeName===’A’即可，但是我是直接将被绑定者设置为a标签，这样的话li标签并没绑定事件，事件冒泡则不会影响li标签。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>下拉框</title>
  7.     <style>
  8.       * {
  9.         margin: 0px;
  10.         padding: 0px;
  11.         box-sizing: border-box;
  12.       }
  14.       .nav {
  15.         background-color: black;
  16.         width: 100%;
  17.         height: 50px;
  18.         line-height: 50px;
  19.       }
  20.       /* 去掉列表样式 */
  21.       li {
  22.         list-style: none;
  23.         float: left;
  24.         margin-left: 20px;
  25.       }
  27.       /* 去掉下划线 */
  28.       a {
  29.         text-decoration: none;
  30.       }
  32.       /* 设置浮动和定位 */
  33.       .nav > ul > li {
  34.         float: left;
  35.         margin-left: 15px;
  36.         position: relative;
  37.       }
  38.       /* 设置悬停 */
  39.       .nav > ul > li > a:hover {
  40.         color: honeydew;
  41.       }
  43.       .nav > ul > li > ul {
  44.         position: absolute;
  45.         top: 50px;
  46.         font-size: 0.5rem;
  47.         border: 1px solid black;
  48.         width: 180px;
  49.         border-top: none;
  50.       }
  52.       .nav li > ul > li > a {
  53.         display: inline-block;
  54.         height: 50px;
  55.         width: 65px;
  56.       }
  58.       .nav > ul > li > ul > li > a:hover {
  59.         background-color: antiquewhite;
  60.       }
  62.       /* 隐藏下拉框 */
  63.       .nav > ul > li > ul {
  64.         display: none;
  65.       }
  66.     </style>
  67.   </head>
  68.   <body>
  69.     <div class="nav">
  70.       <ul>
  71.         <li><a href="">首页</a></li>
  72.         <li><a href="">视频教程</a></li>
  73.         <li><a href="">入门教程</a></li>
  74.         <li><a href="">社区问答</a></li>
  75.         <li>
  76.           <a href="">技术文章</a>
  77.           <ul>
  78.             <li><a href="">头条</a></li>
  79.             <li><a href="">博客</a></li>
  80.             <li><a href="">php教程</a></li>
  81.             <li><a href="">php框架</a></li>
  82.             <li><a href="">js教程</a></li>
  83.             <li><a href="">mysql教程</a></li>
  84.             <li><a href="">php小知识</a></li>
  85.             <li><a href="">css教程</a></li>
  86.             <li><a href="">html教程</a></li>
  87.             <li><a href="">服务器运维</a></li>
  88.           </ul>
  89.         </li>
  90.         <li>
  91.           <a href="">资源下载</a>
  92.           <ul>
  93.             <li><a href="">php工具</a></li>
  94.             <li><a href="">在线工具</a></li>
  95.             <li><a href="">手册下载</a></li>
  96.             <li><a href="">学习课件</a></li>
  97.             <li><a href="">js特效</a></li>
  98.             <li><a href="">后端模板</a></li>
  99.             <li><a href="">网站源码</a></li>
  100.             <li><a href="">类库下载</a></li>
  101.           </ul>
  102.         </li>
  103.         <li><a href="">工具下载</a></li>
  104.         <li><a href="">php培训</a></li>
  105.       </ul>
  106.       <script>
  107.         // 获取被点击a标签
  108.         const as = document.querySelectorAll(".nav>ul>li>a");
  109.         // 循环  判断是否有兄弟节点 创建监听事件
  110.         as.forEach(function (a) {
  111.           //鼠标移入
  112.           a.addEventListener("mouseover", showMenu);
  113.           //鼠标移出
  114.           a.addEventListener("mouseout", closeMenu);
  115.         });
  117.         function showMenu(ev) {
  118.           // console.log(ev.target.nextElementSibling);
  119.           // 判断是否有兄弟节点 有的话则打开下拉菜单
  120.           if (ev.target.nextElementSibling !== null) {
  121.             //console.log(ev.target.nextElementSibling);
  122.             ev.target.nextElementSibling.style.display = "block";
  123.           }
  124.         }
  126.         function closeMenu(ev) {
  127.           if (ev.target.nextElementSibling !== null) {
  128.            // console.log(ev.target.nextElementSibling);
  129.             ev.target.nextElementSibling.style.display = "none";
  130.           }
  131.         }
  132.       </script>
  133.     </div>
  134.   </body>
  135. </html>

结果图


Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：当时打算将html,css,js同步教学的， 同学们反映太难， 所以这个作业完成有难度
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post