JS模拟实现挑选效果代码

本文实例讲述了射流研究…模拟实现挑选效果代码。分享给大家供大家参考。具体如下：

这里模拟实现一个挑选效果，其实这不是模拟，是自制选择，在Java脚本语言的配合下，运用半铸钢钢性铸铁(铸造半钢)的UL/李形成一个可下拉的列表，类似于下拉挑选的效果，你可任意修改他们的颜色和内容之类的，用起来更方便了。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-mn-select-style-demo-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title模拟挑选效果/title/head dy style ul，Li { list-style-type : none；划水：0;margin:0}。选择{ width :200 px h8 :22 px线高：22 pxborder:1px实心# dcdc DC } # text _ left { display : block宽度width :180 pxfloat : leftpadding :0 5px } # arrow _ right { display : block；边框-颜色： # FF6600 # FFFFFF # FFFFFF # FFFFFF；边框样式：实心；边框宽度： 4px显示器：块；font-size : 0；高度： 0;线高： 0;宽度： 0;float : leftmargin-top :8 px；光标：指针指针；} .列表{ width:200pxborder:1px实心# dcdcdcborder-top :0；display:none}。列表李{行高：24 pxpadding:0 5px }。列表Li :悬停{后台： # F8F3F 4；光标：指针指针；}/style div class=' select ' span id=' text _ left '我们/span span id=' arrow _ right '/span/div ul class=' list ' Li新浪新闻/li li腾讯门户/li li凤凰影视/li li奇艺高清/li /ul脚本类型=' text/JAVAScript ' src=' http : jquery-1。9 .1 .量滴js /脚本脚本类型=' text/JavaScript ' $(function(){ $(' # arrow _ right ')).单击（函数(e){ $(').列表')。toggle()；e . stopperpagation()；$(“正文”).单击(函数(){ $(').列表')。hide()；}) }) $('.列表李' .单击(函数(){ $('#text_left ')).文本(($(本)).text()))；})})/脚本/正文/html希望本文所述对大家的Java脚本语言程序设计有所帮助。