左侧收缩菜单

CSS

body{margin:0;padding:0;overflow-x:hidden;background: #0b1f32}
html, body{height:100%;}
img{border:none;}
*{font-family:'微软雅黑';font-size:12px;color:#626262;}
dl,dt,dd{display:block;margin:0;}
a{text-decoration:none;}

/*left*/
.openM{width: 191px;height: 867px;background:url(../images/lefBj.png) no-repeat;position: relative;overflow: hidden}
.hideDt{display: none}
.openM dl{width: 162px;margin-left: 14px;border-bottom: 1px solid #0685a3}
.openM dl:last-child{border-bottom: none;}
.openM dt{padding-left:34px;padding-right:12px;color:#f5f5f5;font-size:18px;position:relative;line-height:48px;cursor:pointer;}
.openM dt span{display: block;color:#f5f5f5;font-size:18px}
.openM .xl dt{background: url("../images/select_xl01.png") no-repeat right center;}
.openM .xl dt.avt{background: url("../images/select_xl.png") no-repeat right center;}
.openM dd{position: relative}
.openM dd a{color:#0ac8d4;padding-left:34px;font-size: 16px;line-height: 36px;display: block;z-index: 99;position: relative}
.openM dd a span{width: 191px;height: 36px;background: url("../images/dspan.png") no-repeat;position: absolute;left: -14px;top: 0;z-index: 98;display: none}
.openM dd a:hover,.openM dd a.menu_chioce{color: #fff}
.openM dd a:hover span,.openM dd a.menu_chioce span{display: block }
.openM dt img{position:absolute;left:0;top:50%;transform: translateY(-50%)}
.closeBtn{background: url("../images/icon_close.png") no-repeat;width: 12px;height: 34px;position: absolute;right: -4px;top: 50%;transform: translateX(-50%);z-index: 9999;cursor: pointer}

.closeM{background: url("../images/lefBjS.png") no-repeat;width: 48px;height: 867px;position: relative;}
.closeM dl{border-bottom: 1px solid #0685a3;position: relative;}
.closeM dl:last-child{border-bottom: none;}
.closeM dt{height: 46px;width: 30px;}
.closeM dt span{display: none}
.closeM dl .hideDt{color:#f5f5f5;font-size:18px;position:relative;line-height:48px;cursor:pointer}
.closeM dd{position: absolute;left: 47px;top: 0;width: 140px;background:rgba(14,50,92,0.8);text-align: center;display: none;padding-bottom: 10px;}
.closeM dd .hideDt{display: block}
.closeM dd.firstDD{padding: 0}
.closeM dd a{color:#0ac8d4;font-size: 16px;line-height: 36px;display: block;z-index: 99;position: relative}
.closeM dd a span{display: none}
.closeM dd a:hover,.closeM dd a.menu_chioce{color: #fff;background: rgba(7,81,117,0.8)}
.closeM dt img{position:absolute;left:50%;top:50%;transform: translate(-50%,-50%)}
.closeM .closeBtn{}

html

<script type="text/javascript" src="jquery.js"></script>
<div class="leftsidebar_box">
  <div class="closeBtn"></div>
  <dl>
    <dt><img src="public/images/icon_11.png" alt=""><span>首页</span></dt>
    <dd class="firstDD"><em class="hideDt">首页</em></dd>
  </dl>
  <dl class="xl">
    <dt><img src="public/images/icon_12.png" alt=""><span>设备列表</span></dt>
    <dd>
      <em class="hideDt">设备列表</em>
      <a href="#" class="menu_chioce">设备列表<span></span></a>
      <a href="#">设备列表<span></span></a>
      <a href="#">设备列表<span></span></a>
      <a href="#">设备列表<span></span></a>
      <a href="#">设备列表<span></span></a>
      <a href="#">设备列表<span></span></a>
      <a href="#">设备列表<span></span></a>
    </dd>
  </dl>
  <dl>
    <dt><img src="public/images/icon_13.png" alt=""><span>设备列表</span></dt>
    <dd class="firstDD"><em class="hideDt">设备列表</em></dd>
  </dl>
  <dl>
    <dt><img src="public/images/icon_14.png" alt=""><span>设备列表</span></dt>
    <dd class="firstDD"><em class="hideDt">设备列表</em></dd>
  </dl>
  <dl class="xl">
    <dt><img src="public/images/icon_15.png" alt=""><span>设备列表</span></dt>
    <dd>
      <em class="hideDt">设备列表</em>
      <a href="#">设备列表<span></span></a>
      <a href="#">设备列表<span></span></a>
    </dd>
  </dl>
  <dl class="xl">
    <dt><img src="public/images/icon_16.png" alt=""><span>系统管理</span></dt>
    <dd>
      <em class="hideDt">系统管理</em>
      <a href="#">用户管理<span></span></a>
      <a href="#">角色管理<span></span></a>
      <a href="#">日志管理<span></span></a>
    </dd>
  </dl>
</div>

  $(function(){
    var clicked = true
    $(".leftsidebar_box").addClass("openM")
    $(".openM .xl dt").click(function(){
      $(this).toggleClass("avt");
      $(this).parent().find('dd').slideToggle();
    });
    $(".closeBtn").click(function () {
      console.log()
      if (clicked){
        clicked = !clicked
        $(".leftsidebar_box").removeClass("openM").addClass("closeM")
        console.log(clicked)
      }else {
        clicked = !clicked
        $(".leftsidebar_box").removeClass("closeM").addClass("openM")
        console.log(clicked)
      }
    })
    $('body').on('mouseover', '.closeM dl', function() {
      $(this).siblings("dl").find('dd').hide();
      $(this).find("dd").show();
    });
    $('body').on('mouseout', '.closeM dl', function() {
      $(this).find('dd').hide();
    });


  })