                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /展開與收起效果

請問，點擊后這個空白部分怎么回事兒啊?，可以去掉嗎？

<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 聯(lián)通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>