在最近的工作中,需要做一个效果:(最终效果—展开时)
![view_finished.JPG](https://i-blog.csdnimg.cn/blog_migrate/ba75f425f953c4b580e562a71a3b1b12.jpeg)
(闭合时)
![view_finished_close.JPG](https://i-blog.csdnimg.cn/blog_migrate/bb641023a68d920b92fe70ee3ac98dff.jpeg)
通过点击请选择旁边的箭头
![dropdown.jpg](https://i-blog.csdnimg.cn/blog_migrate/6ee1f3ecf8dee118c509965a794a2434.jpeg)
很正常的我们会为这个箭头图片添加一个click事件,可能代码如下:
<
img onclick
=
"
showReceiverChoice()
"
src
=
"
dropdown.jpg
"
align
=
"
absmiddle
"
id = " imgchoosesender " style = " padding-right: 0; " />
id = " imgchoosesender " style = " padding-right: 0; " />
我们添加两个函数,一个是展开,一个是关闭:
// 显示“选择层”
function showReceiverChoice()
{
document.getElementById( " imgchoosesender " ).src = " up.jpg " ;
document.getElementById( " divsenderchoice " ).style.display = " block "
document.getElementById( " imgchoosesender " ).setAttribute('onclick',document.all ? eval( function (){hideReceiverChoice()}) : 'javascript:hideReceiverChoice()');
}
// 隐藏“选择层”
function hideReceiverChoice()
{
document.getElementById( " divsenderchoice " ).style.display = " none "
document.getElementById( " imgchoosesender " ).src = " dropdown.jpg " ;
document.getElementById( " imgchoosesender " ).setAttribute('onclick',document.all ? eval( function (){showReceiverChoice()}) : 'javascript:showReceiverChoice()');
}
我们可以注意到中两个函数的最后一句脚本通过了setAttribute方法为
![dropdown.jpg](https://i-blog.csdnimg.cn/blog_migrate/6ee1f3ecf8dee118c509965a794a2434.jpeg)
注册脚本搜索至网上,可以兼容 IE 6.0+ FF。
本文主要是表达了一种应用,顺便也简单地了解一下js如何来注册事件。
欢迎大家给出意见。