<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
.btn{
width: 20px;
height: 20px;
position: relative;
background: red;
top: 500px;
left: 20px;
}
.menu{
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 150px;
border: 1px solid #333;
display: none;
}
</style>
</head>
<body>
<div class="btn" id="btn">
<ul class="menu" id="menu">
<li>添加分组</li>
<li>重命名改组</li>
<li>删除改组</li>
</ul>
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$("#btn").click(function(){
console.log($(window).height()); //窗口的高度
console.log($("#btn").offset().top); //按钮距窗口顶部的距离
console.log($("#btn").height()); //按钮的高度
console.log($("#menu").height()); //菜单的高度
var wH = $(window).height();
var bT = $("#btn").offset().top;
var bH = $("#btn").height();
var mH = $("#menu").height();
if( wH-bT < bH+mH){
$("#menu").css("top","-150px");
}else{
$("#menu").css("top","20px");
}
$("#menu").toggle();
})
</script>
</body>
</html>