Jquery 浮起的滚动条展开与隐藏

插件

<script src="js/jquery.nicescroll.min.js"></script>

下载插件连接
https://www.bootcdn.cn/jquery.nicescroll/
HTML代码

<div style="width: 32%;z-index: 1;overflow: auto;">
	<div class="center_zj">
		<div class="fggrh" style="height: 201px;">
			<div class="center_zj_dy">
				<div class="center_zj_img">
					<img src="img/30.jpg">
				</div>
				<div class="center_div">
					<p class="center_bt">
						<span>烘焙</span>
						<img class="picts" src="img/选择（未选）.png">
					</p>
					<p>
						<span>王老师</span>
						<span style="margin-left: 64px;">学分<em style="color: #FF6B6B;"> 3</em></span>
					</p>
					<p>
						<span>已选：<em>234</em></span>
						<span style="margin-left:41px;">剩余：<em>10</em></span>												
					</p>
					<p>
						<span>地点：</span>
						<span>G-1-201</span>
					</p>
				</div>
			</div>
			<div class="center_zj_de particulars parts">
				<p>
					<span style="color: #51B7B0;">时间：</span>
					<span>周三第4节、周五第3节</span>
				</p>										
				<p style="line-height: 20px;">
					<span style="color: #51B7B0;">课程特色：</span>
					<span>热爱美食，享受生活</span>
				</p>
				<p>
					<span style="color: #51B7B0;">备注：</span>
					<span>烘焙,又称为烘烤,焙烤,是指在物料燃点之下通过干热的方式使物料脱水变干变硬的过程干变的烘焙,烘焙,又称为烘烤,焙烤,是指在物料燃点之下通过干热的方式使物料脱水变干变硬的过程干变的烘焙,烘焙,又称为烘烤,焙烤,是指在物料燃点之下通过干热的方式使物料脱水变干变硬的过程干变的烘焙,又称为烘烤,焙烤,是指在物料燃点之下通过干热的方式使物料脱水变干变硬的过程干变的</span>
				</p>
			</div>
		</div>
		<div class="center_zj_ds1">
			<span class="middle_3_bu title" type="button">详情											
			</span>
			<img class="tupxila" src="img/详细（下拉）.png" />
		</div>
	</div>
</div>

CSS代码

.center_zj{
	border-radius: 10px;
	color: #666;
	border: 1px solid #ddd;	
	margin-bottom: 20px;
	background: #fff;
	z-index: 3;
}
 /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 
.fggrh::-webkit-scrollbar 
{ 
	width: 0px;
	height: 0px;
} 
.center_zj_dy{
	display: flex;
    padding: 10px;
	min-height: 100px;
}
.center_zj_dy .center_zj_img{
	width: 50%;
}
.center_zj_dy .center_zj_img img{
	width: 100%;
	border: 2px solid #ddd;
	height: 94px;
}
.center_zj_dy .center_div{
	width: 50%;
	margin-left: 15px;
}
.center_zj_dy .center_div p{
	font-size: 13px;
	margin-bottom: 6px;
}
.center_zj_de{
	padding: 0px 10px;
	font-size: 13px;
}
.center_zj_de p{
	margin-bottom: 3px;
}
.particulars{
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}
.center_zj_ds1{
	height: 30px;
    border-top: 1px solid #ddd;
    text-align: center;
    z-index: 2;
    line-height: 28px;
}
.middle_3_bu{
	outline: none;
	border: none;
	background: none;
	color: #666;
	padding: 5px;
    color: #ff6b6b;
}
.tupxila{
	transform: rotate(0deg); 
}
.rotate{
    transform-origin:center center; //旋转中心要是正中间 才行
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transition: transform 0.2s; //过度时间 可调
}

.rotate1{
    transform-origin:center center;
    transform: rotate(0deg); //返回原点
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transition: transform 0.2s; 
}

JS代码

$('.center_zj_ds1').click(function(){
	// 箭头旋转
	if($(this).find(".tupxila").hasClass("rotate")){ //点击箭头旋转180度
	    $(this).parent().find(".fggrh").css("overflow","hidden")
		$(this).parent().find(".parts").addClass("particulars")
		$(this).find(".tupxila").removeClass("rotate");
		$(this).find(".tupxila").addClass("rotate1");
		$(this).find(".middle_3_bu").text("详情");
	}else{
		$(this).find(".middle_3_bu").text("收起");
		$(this).parent().find(".fggrh").css("overflow","auto")
		$(this).parent().find(".parts").removeClass("particulars")
		$(this).find(".tupxila").removeClass("rotate1"); //再次点击箭头回来
		$(this).find(".tupxila").addClass("rotate");
	}
});	
$(".fggrh").niceScroll({ 
	touchbehavior:true,     // 是否是触摸式滚动效果
	cursorcolor:"#51B7B0",  // 改变滚动条颜色
	cursoropacitymin: 0, // 当滚动条是隐藏状态时改变透明度, 值范围 1 到 0
    cursoropacitymax: 1, // 当滚动条是显示状态时改变透明度, 值范围 1 到 0
    cursorwidth: "5px", // 滚动条的宽度，单位：便素 
	cursorborder:"0",  // CSS方式定义滚动条边框
	autohidemode:true,      //滚动条是否是自动隐藏，默认值为 true
	cursorborderradius:"10px"  // 滚动条圆角（像素）
});

效果图