效果图:
点击前:
点击时滑动展开,点击后:
Css代码:
.am-collapse { //点击前样式
display: none;
}
.am-collapse.am-in { //点击后样式
display: block;
}
.am-collapsing { //点击时样式
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height .3s ease;
transition: height .3s ease;
}
[data-am-collapse]
{
cursor: pointer;}
JS代码
这种为覆盖式收缩滑动。
$(function () {
var kg = false;
$(".admin-parent").click(function () {
var height = $(".admin-parent").height();
var height1 = $(".admin-parent li").height();
var height2 = $("#collapse-nav").height();
alert(height2);
if (!kg) {
$("#collapse-nav").slideToggle(1);
$(this).animate({
position: "relative",
height: "320px",
overflow: "hidden"
}, 500);
kg = true;
}
else {
kg = false;
$(this).animate({
position: "relative",
height: "50px",
overflow: "hidden"
}, 500, function () { $("#collapse-nav").slideToggle(); });
}
});
});
这种为挤压式收缩滑动。
$(function () {
$(".admin-parent").click(function () {
$("#collapse-nav").slideToggle();
});
});