请选择 进入手机版 | 继续访问电脑版

js导航下拉显示隐藏案例

[复制链接]
查看1732 | 回复0 | 2020-2-13 17:50 | 显示全部楼层 |阅读模式
通过JavaScript实现导航下拉显示隐藏功能,下面自丢网带大家看下案例代码:
  1.     <style>
  2.         ul {
  3.             margin: 0;
  4.             padding: 0;
  5.             display: none;
  6.         }
  7.         
  8.         #zidiu li {
  9.             list-style: none;
  10.             width: 200px;
  11.         }
  12.         
  13.         #zidiu li:hover {
  14.             background-color: yellow;
  15.         }
  16.     </style>
  17.     <div id="zidiu"> 自丢网导航
  18.         <ul>
  19.             <li>二级导航</li>
  20.             <li>二级导航</li>
  21.             <li>二级导航</li>
  22.             <li>二级导航</li>
  23.             <li>二级导航</li>
  24.         </ul>
  25.     </div>
  26.     <script>
  27.         var zidiu = document.querySelector('#zidiu');
  28.         var ul = document.querySelector('ul');
  29.         zidiu.onmouseover = function() {
  30.             ul.style.display = 'block';
  31.         }
  32.         zidiu.onmouseout = function() {
  33.             ul.style.display = 'none';
  34.         }
  35.     </script>
复制代码
显示效果如图:

js导航下拉显示隐藏案例

js导航下拉显示隐藏案例

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

UID
1
贡献
387
丢币
38902
主题
4607
回帖
116
注册时间
2018-9-25
最后登录
2024-3-24