树形导航栏（折叠）（jquery）

最新推荐文章于 2021-08-14 11:01:46 发布

weixin_30908941

最新推荐文章于 2021-08-14 11:01:46 发布

阅读量133

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/TTTK/p/6298032.html

版权

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>4_竖向折叠导航菜单_1</title>
  <style type="text/css">
    /*全局设定*/
    .nav{position: absolute;top:100px;left: 100px;}
    *{margin: 0;padding: 0;font-size: 14px;font-size: "微软雅黑";}
    ul{list-style: none;}
    .nav a{text-decoration: none;display: block;width: 135px;height: 30px;line-height: 30px;color: #fff;text-align: center;}    
    /*一级列表设定*/
    .a1{font-size: 16px;height: 35px;line-height: 35px;}
    .nav{background-color: #888;}
    .li0{border-top: 2px solid #bbb;}
    .li0:first-child{border: 0;}
    /*二级列表设定*/
    .nav1{display: none;background-color: #bbb;}
    /*伪类*/
    .li0:hover .a1{background-color: #444;font-weight: bold;font-size: 17px;}
    .nav1 a:hover{background-color: #f60;font-weight: bold;font-size: 15px;}
  </style>
</head>
<body>
  <ul class="nav">
    <li class="li0"><a class="a1">草帽海贼团</a>
      <ul class="nav1" id="nav101">
        <li class="li1"><a href="">路飞</a></li>
        <li class="li1"><a href="">索隆</a></li>
        <li class="li1"><a href="">山治</a></li>
      </ul>
    </li>
    <li class="li0"><a class="a1">海军</a>
      <ul class="nav1" id="nav102">
        <li class="li1"><a href="">黄猿</a></li>
        <li class="li1"><a href="">青雉</a></li>
        <li class="li1"><a href="">赤犬</a></li>
      </ul>
    </li>
    <li class="li0"><a class="a1">现任王下七武海</a>
      <ul class="nav1" id="nav103">
        <li class="li1"><a href="">汉库克</a></li>
        <li class="li1"><a href="">米霍克</a></li>
        <li class="li1"><a href="">熊</a></li>
        <li class="li1"><a href="">巴基</a></li>
        <li class="li1"><a href="">白胡子二世</a></li>

      </ul>
    </li>
    <li class="li0"><a class="a1">革命军</a>
      <ul class="nav1" id="nav104">
        <li class="li1"><a href="">龙</a></li>
        <li class="li1"><a href="">萨博</a></li>
        <li class="li1"><a href="">人妖王</a></li>
      </ul>
    </li>
    <li class="li0"><a class="a1">现任四皇</a>
      <ul class="nav1" id="nav105">
        <li class="li1"><a href="">香克斯</a></li>
        <li class="li1"><a href="">凯多</a></li>
        <li class="li1"><a href="">玲玲</a></li>
        <li class="li1"><a href="">蒂奇</a></li>

      </ul>
    </li>
  </ul>
</body>
<script src = "js/jquery-1.4.2.min.js"> </script>
<script>
 $(function(){
  $('.li0 .a1').each(function(){
    $(this).click(function(){
      if($(this).siblings().css('display')=="none"){
        console.log('weikong');
        $(this).siblings().css('display','block');
      }else{
        $(this).siblings().css('display','none');
      };
    })
  })
})
</script>
</html>

转载于:https://www.cnblogs.com/TTTK/p/6298032.html

weixin_30908941

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
树形导航栏（折叠）（jquery）

<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>4_竖向折叠导航菜单_1</title> <style type="text/css"> /*全局设定*/ .nav{position: absol...
复制链接

扫一扫