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>