express主页左边布局&jQuery效果

左侧布局与效果实现

body

用ul与li标签实现一级目录和二级目录的嵌套思路

<div class="nav-left">
    <h3>
      <img src="/images/header_logo.png" alt="">
      <!-- <h1>小电视</h1> -->
    </h3>
    <ul>
      <li>
        <div class="menu active">
          <img class="img" src="/images/home_black.png" alt="">
          <span>首页</span>
          <img class="img_direction_down" src="/images/right_black.png" alt="">
        </div>
        <ul>
          <li class="menu">
           <img class="img" src="/images/home_black.png" alt="">
           <a href="#">banner图</a>
          </li>
          <li class="menu">
            <img class="img" src="/images/home_black.png" alt="">
            <a href="#">无</a>
           </li>
           <li class="menu">
            <img class="img" src="/images/home_black.png" alt="">
            <a href="#">无</a>
           </li>
           <li class="menu">
            <img class="img" src="/images/home_black.png" alt="">
            <a href="#">无</a>
           </li>
        </ul>
      </li>
      <li>
        <div class="menu">
          <img class="img" src="/images/home_black.png" alt="">
          <span>首页</span>
          <img class="img_direction_down" src="/images/right_black.png" alt="">
        </div>
        <ul>
          <li class="menu">
           <img class="img" src="/images/home_black.png" alt="">
           <a href="#">无</a>
          </li>
          <li class="menu">
            <img class="img" src="/images/home_black.png" alt="">
            <a href="#">无</a>
           </li>
           <li class="menu">
            <img class="img" src="/images/home_black.png" alt="">
            <a href="#">无</a>
           </li>
           <li class="menu">
            <img class="img" src="/images/home_black.png" alt="">
            <a href="#">无</a>
           </li>
        </ul>
      </li>
      <li>
        <div class="menu">
          <img class="img" src="/images/home_black.png" alt="">
          <span>首页</span>
          <img class="img_direction_down" src="/images/right_black.png" alt="">
        </div>
        <ul>
          <li class="menu">
           <img class="img" src="/images/home_black.png" alt="">
           <a href="#">无</a>
          </li>
          <li class="menu">
            <img class="img" src="/images/home_black.png" alt="">
            <a href="#">无</a>
           </li>
           <li class="menu">
            <img class="img" src="/images/home_black.png" alt="">
            <a href="#">无</a>
           </li>
           <li class="menu">
            <img class="img" src="/images/home_black.png" alt="">
            <a href="#">无</a>
           </li>
        </ul>
      </li>
    </ul>
    <div class="out">退出登录</div>
  </div>

css

‘>’子级标签表示一级与二级目录的样式，加深其用法，清晰

<!DOCTYPE html>
<html>
  <head>
    <title>小电视后台管理系统</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <style>
      body{
        background-color: grey;
      }
      ul{
        list-style: none;
        cursor: pointer;
      }
      a,span{
        color: #fff;
      }
      .nav-left h3{
        padding: 40px;
      }
      .nav-left > ul{
        padding: 0 16px;
      }
      .nav-left > ul > li {
        padding: 20px 0;
        border-top: 2px solid #37383D;
      }
      .nav-left > ul > li:first-child {
        border-top:none;
      }
      .menu{
        position: relative;
        margin: 0 20px;
        line-height: 40px;
        border-radius:24px;
      }
      .img{
        width: 15px;
        height: 15px;
        /* padding-bottom: 0; */
      }
      .img_direction_down{
        width: 15px;
        height: 10px;
      }
      .menu.active{
        background-color: gainsboro;
      }
      .menu > img:first-child{
        margin: -3px 18px;
      }
      .menu > img:last-child{
        position: absolute;
        right: 24px;
        top: 50%;
        margin-top: -4px;
      }
      /* 二级 */
      .nav-left > ul > li > ul > li{
        margin-top: 20px;
      }
      .out{
        position: fixed;
        bottom: 16px;
        width: 80%;
        left: 50%;
        transform: translate(-50%);
        line-height: 40px;
        text-align: center;
        background-color: gainsboro;
        border-radius: 24px;
        font-weight: bold;
        color: #fff;
        cursor: pointer;
      }
    </style>
  </head>
</html>

script

实现下拉slideUp、slideDown，改变图标attr和样式removeClass、addClass
div.menu找到div标签里有menu的class样式的那个标签

siblings()查找兄弟

<body>
  <script src="/javascripts/jquery.js"></script>
  <script>
    $(function(){
      // alert(1)
      // 一级目录
      $('.nav-left > ul > li').click(function(){
        // siblings()兄弟,添加一级菜单样式
        $(this).siblings().find('div.menu').removeClass('active');
        $(this).find('div.menu').addClass('active');
        // 更换箭头
        $(this).siblings().find('.img_direction_down').attr('src','/images/right_black.png');
        $(this).find('.img_direction_down').attr('src','/images/down_black_true.png');
        // 展开收起
        $(this).siblings().find('ul').slideUp(200);
        $(this).find('ul').slideDown(200);

      })
    })
  </script>
</body>

/stylesheets/style.css

*{margin: 0;padding: 0;}
body {
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
ul{
	list-style: none;
}
a {
  color: #00B7FF;
	text-decoration: none;
}
input{
	border:0px;
	background-color: none;
	outline:none;
}