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>