我希望有一个滑动(向下)切换,但希望面板沿着按钮的左边缘整齐排列。我不想硬编码边距、位置、像素等,但希望向下滑动面板始终与(和相对)按钮(左下角)“相关”。
我错过了什么?
<!doctype html>
<head>
<script src='http://code.jquery.com/jquery-1.7.2.min.js'></script>
<style type="text/css">
.slideToggleBox{
float:left;
padding:8px;
margin:16px;
border:1px solid red;
width:200px;
height:50px;
background-color:blue;
color:white;
position:fixed;
left:-10.5px;
top:2.3%;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="clear">
<button id=slideToggle>slideToggle()</button>
<br/>
<div class="slideToggleBox">
slideToggle()
</div>
</div>
<script type="text/javascript">
$("#slideToggle").click(function () {
$('.slideToggleBox').slideToggle();
});
</script>
</body>
</html>