我有一个使用css打开滑动面板的代码，但我需要帮助找到一种方法来关闭它。这是代码：
$('button').click(function(){
$('#slideout').toggleClass('on');
});.container {
margin-top: 20px;
}
#slideout {
background: #fff;
box-shadow: 0 0 5px rgba(0,0,0,.3);
color: #333;
position: fixed;
top: 100px;
left: -520px;
width: 500px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
#slideout form {
display: block;
padding: 20px;
}
#slideout textarea {
display:block;
height: 100px;
margin-bottom: 6px;
width: 250px;
}
#slideout.on {
left: 0;
}<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>CSS Slide Out Panel</title>
<link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="Slidecontainer">
<button type="button" class="btn btn-default">Toggle</button>
<div id="slideout">
<form>
<textarea class="form-control"></textarea>
<input class="btn btn-primary" type="submit" value="Post feedback"></input>
</form>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
这就是它现在的样子： Without Close Function
这就是我希望它的样子： With Close Fuction
答案 0 :(得分：1)
尝试以下方式。从boolean isWithinRange(String d)
{
boolean withinDate = false;
try
{
DateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
Date date = dateFormat.parse(d);
withinDate = !(date.before(startDate) || date.after(endDate));
}
catch (ParseException parseException)
{
}
return withinDate;
}
移除on课程。
修改
您也可以使用单独的按钮。在打开按钮上使用slideout。
addClass$('.closebtn').click(function(){
$('#slideout').removeClass('on');
});
$('.openbtn').click(function(){
$('#slideout').addClass('on');
});
$('.btn-default').click(function(){
$('#slideout').toggleClass('on');
});.container {
margin-top: 20px;
}
#slideout {
background: #fff;
box-shadow: 0 0 5px rgba(0,0,0,.3);
color: #333;
position: fixed;
top: 100px;
left: -520px;
width: 500px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
#slideout form {
display: block;
padding: 20px;
}
#slideout textarea {
display:block;
height: 100px;
margin-bottom: 6px;
width: 250px;
}
#slideout.on {
left: 0;
}