请问，点击后这个空白部分怎么回事儿啊?，可以去掉吗？
<html>
<meta http-equiv="Content-Type"content="text/htm;charset="utf-8"/> <head>
<title>下拉列表</title>
<style type="text/css">
body{
margin:0 auto; padding:0px;
}
#jj0{
margin:0 auto;
background:e8e8e8;
text-align:center;
width:600px;
height:auto;
color:red;
padding:0px;
}
#jj2{
display:none; }
#button-1{
margin:0 auto;
background:gray;
padding: 0 ;
text-align:center;
width:100px;
height:22px;
text-decoration:none;
display:block;
font-size:10pt;
color:white;
}
.slide{
padding:0px;
width:600px;
border-top:4px gray solid;
margin:0 auto;
padding:0;
}
</style>
</head>
<body>
<script type="text/javascript">
function list0(){
document.getElementById("jj2").style.display="block";
document.getElementById('button-1').innerHTML="收起-";
document.getElementById("button-1").href="javascript:hidediv()";
}
function hidediv(){
document.getElementById("jj2").style.display="none";
document.getElementById("button-1").innerHTML="更多选项+";
document.getElementById("button-1").href="javascript:list0()";
}
</script>
<div id="jj0">
<div id="jj1">
<p> 手机-商品筛选</p>
<p> 手机移动4g 联通3g 电信3g</p>
<div id="jj2">
<p> 防抖拍照 全钛合金壳 生物识别</p> </div>
</div>
</div>
<p class="slide">
<a href="javascript:list0();" id="button-1" class=" ">加载更多+</a></p>
</body> </html>
