左侧导航栏 隐藏 显示

HTML:

<div class="navslid" id="left"></div>
<button class="btn" id="click">click</button>

CSS:

.navslid {
  width: 200px;
  height: 500px;
  background-color: #1A2226;
  display: inline-block;
}

@keyframes show {
  from {
    width: 0;
  }
  to {
    width: 200px;
  }
}

@keyframes hide {
  from {
    width: 200px;
  }
  to {
    width: 0;
  }
}

.navslid-show {
  animation-name: show;
  animation-duration: 1s;
}

.navslid-hide {
  animation-name: hide;
  animation-duration: 1s;
  width: 0;
}

.btn {
  position: absolute;
}

 

JAVASCRIPT:

$(function() {
  $("#click").click(function() {
    if ($("#left").hasClass("navslid-hide")) {
      $("#left").addClass("navslid-show");
      $("#left").removeClass("navslid-hide");
    } else if ($("#left").hasClass("navslid-show")) {
      $("#left").addClass("navslid-hide");
      $("#left").removeClass("navslid-show");
    } else {
      $("#left").addClass("navslid-hide");
      console.log("default no");
    }
  });
});

 

演示页面：https://jsfiddle.net/kkcodin/j7L2svqy/#

转载于:https://my.oschina.net/tangzy123/blog/759399