fgm实例练习笔记-2.1点击展开下拉列表

并不是真正的下拉列表，而是一个按钮button，点击显示display:block; 一个列表。再点击列表中每一项可以实现相应功能，并且最后一项可以直接关闭列表display:none;，再次点击按钮也可以关闭列表。
鼠标扫过选项时选项变色background:blue; ，用hover选择器实现。
每个选项点击后还会有效果，所以在每个选项li 内做了一个<a href=""> 标签，留出接口。

<script>
window.onload = function(){
 var obtn = document.getElementsByTagName("button")[0];
 var oul = document.getElementsByTagName("ul")[0];
 var oli = document.getElementsByTagName("li");
 var oclo = document.getElementById("close");

 obtn.onclick = function(){
 if (oul.style.display == "none" ){ //条件内是判断是否相等的意思，要用==，而不是=
 oul.style.display = "block";}
 else
 {oul.style.display = "none";};
 } //用if判断条件。但就两种可能情况，更简洁的代码是用二目操作符?:
 /*oul.style.display =  oul.style.display =="none"  ? "block" :"none" ;}*/

  oclo.onclick = function(){
  oul.style.display= "none";}//给最后一个li选项单独一个id，onclick就关闭
};  
</script>