我有一段代码可以使用 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
最佳答案
尝试以下方式。从 slideout 中删除 on 类。
编辑:
您也可以使用单独的按钮。在打开按钮上使用 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;
}<!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>
<button type="button" class="openbtn">Open</button>
<div id="slideout">
<form>
<textarea class="form-control"></textarea>
<input class="btn btn-primary" type="submit" value="Post feedback"></input>
<button type="button" class="closebtn">Close</button>
</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>关于javascript - 需要帮助打开和关闭水平滑出面板？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34216856/