html左侧导航栏显示不全,左侧导航栏 隐藏 显示

HTML:

click

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/#

    原文作者:weixin_39934613
    原文地址: https://blog.csdn.net/weixin_39934613/article/details/117723884
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞