fgm实例练习笔记-2.1点击展开下拉列表
2017-07-08 17:29
274 查看
并不是真正的下拉列表,而是一个按钮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>
相关文章推荐
- fgm实例练习笔记-2.6图片列表:鼠标移入/移出改变图片透明度
- Selenium笔记---鼠标悬停显示二级菜单 点击下拉列表
- fgm实例练习笔记-1.4用循环将三个Div变成红色
- fgm实例练习笔记-3.9倒计时
- 增加Android下spinner控件的点击下拉列表自动更新事件并实例应用--USB摄像头在spinner内下拉更新(一)
- fgm实例练习笔记-3.4比较数字大小
- fgm实例练习笔记-1.2网页换肤
- fgm实例练习笔记-1.6记住密码提示框
- fgm实例练习笔记-4.1 setTimeout应用
- angular学习之四实例:点击收缩展开下拉
- fgm实例练习笔记-1.3函数接收参数并弹出
- fgm实例练习笔记-2.4弹出层效果
- fgm实例练习笔记-2.5函数传参,改变Div任意属性的值
- fgm实例练习笔记-3.7网页计算器
- fgm实例练习笔记-2.5页面加载后自加一
- fgm实例练习笔记-2.3求出数组中所有数字的和
- fgm实例练习笔记-1.5js写css hover选择器
- 增加Android下spinner控件的点击下拉列表自动更新事件并实例应用--USB摄像头在spinner内下拉更新(二)
- 如何引用jQuery实现下拉列表,点击展开,点击关闭。
- fgm实例练习笔记-3.8简易网页时钟