2月8日学习日志

今天主要学习了js的Dom选择器和节点操作以及监听器.同时学习了JS常见案例:点击下拉菜单

HTML:

<div id="click">点击打开</div>
<ul class="list">
<li class="item">
1
</li>
<li class="item">
2
</li>
<li class="item">
3
</li>

CSS:

#click{
width:80px;
height:40px;
background-color:#e3e3e3;
text-align:center;
line-height:40px;
}
.list{
background-color:#e3e3e3;
width:80px;
text-align:center;
display:none; /*display:none;不会显示*/
}

JS:

<script>
var clickBtn=document.getElementById("click");
var list=document.getElementsByClassName('list')[0];
var isOpen=false; //判断是否打开

clickBtn.addEventListener('click',function(){ //增加一个事件监听器
isOpen=!isOpen;
if(isOpen)
{
clickBtn.innerHTML="点击隐藏";
list.style.display='inline-block';
}
else
{
clickBtn.innerHTML="点击打开";
list.style.display='none';
}
})

</script>