左側導航欄顯示隱藏toggle使用

toggle, jquery1.8 and 2.1(error)

$(document).ready(function(){
  $("button").toggle(function(){
    $("body").css("background-color","green");},
    function(){
    $("body").css("background-color","red");},
    function(){
    $("body").css("background-color","yellow");}
  );
});　　

 

 

toggle, add class控制display,對於width=0的隱藏無效，button自己會隨點擊而隱藏

$("button").toggle(function(){
　　　　$("#left").addClass("navslid-show");
　　},
   function(){
　　　　$("#left").addClass("navslid-hide");
　　}
);

　　

元素自己toggle

$("#btnnav").click(function(){
	$("#left").toggle(function(){
	      $("#left").addClass("navslid-show");
	    },
	    function(){
	      $("#left").addClass("navslid-hide");
	    }
	);
})

　　

 

 

The end way.

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;
}

html　　

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

js

$(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/#&togetherjs=Ey1yPKyvxg