EGI 3D图形编程

谷歌浏览器关闭阅读清单

  返回  

最简单的二级导航

2021/8/20 10:59:56 浏览:
  <div class="nav">
    <ul>
      <li class="nav_wai">
        <span>首页</span>
      </li>
      <li class="nav_wai">
        <span>中心简介</span>
        <ol class="nav_nei">
          <li>联系我们</li>
          <li>业务范围</li>
          <li>规模设施</li>
        </ol>
      </li>
      <li class="nav_wai">
        <span>培训报名</span>
        <ol class="nav_nei">
          <li>文件下载</li>
          <li>模拟考试</li>
          <li>考试报名</li>
        </ol>
      </li>
      <li class="nav_wai">
        <span>培训报名</span>
        <ol class="nav_nei">
          <li>文件下载</li>
          <li>模拟考试</li>
          <li>考试报名</li>
        </ol>
      </li>
      <li class="nav_wai">
        <span>公告动态</span>
        <ol class="nav_nei">
          <li>公告通知</li>
          <li>中心动态</li>
        </ol>
      </li>
    </ul>
  </div>
    *{margin:0; padding: 0;}
    ul li {list-style: none; }
    .nav { width:400px; height: 50px; display: block;}
    .nav ul{ width:100%; height: 100%;}
    .nav ul li { width:19%; height: 100%; display: block; float: left; background: orangered; line-height: 50px; border-left: 1px solid #ccc; text-align: center;color: #fff;}
    .nav ul li ol { width: 100%; height: auto; display: none; color: #f1f1f1;}
    .nav ul li ol li { width:100%; height: 40px; display: block; background: orange; line-height: 40px; text-align: center;}
    .nav ul li .active{ background: red; color:#fff}
<script src="./js/jquery-3.3.1.min.js"></script>
<script>
  $('.nav_wai').mouseenter(function(){
    $(this).find('ol').show();
    $(this).siblings().find('ol').hide();
    $(this).addClass('active');
    $(this).siblings().removeClass('active');
    
  })
  $('.nav_nei li').click(function(){
      alert(1111)
      // 这里可以写自己的代码,选中二级导航跳转到哪里
      event.stopPropagation();    //  阻止事件冒泡
    })
  
</script>

PS:希望对你有帮助

联系我们

如果您对我们的服务有兴趣,请及时和我们联系!

服务热线:18288888888
座机:18288888888
传真:
邮箱:888888@qq.com
地址:郑州市文化路红专路93号