JavaScript模拟下拉菜单代码

优点：点击body区域同样可以隐藏下拉菜单，且不会和body已有的onclick事件冲突。
缺点：请大家指出，虚心接受！
运行框代码看似繁多，实属无奈，请下载附件，以便更好观察或修改~！

下拉菜单

body{margin:20px auto;font-family:Arial, Helvetica, sans-serif;font-size:12px;width:950px;height:400px;border:solid 1px #aaa; position:relative;padding:10px;}
ul{margin:0;padding:0;list-style:none;}
.dropDownList{position:absolute;left:100px;top:100px;}
/* .dropDownList div.dropdown select{display:none;}*/
.dropDownList div.dropdown{float:left;margin-right:50px;width:200px;}
.dropDownList span{display:block;width:146px;height:26px;background:url(http://3.bp.blogspot.com/_bdBPvgEipxw/SRMUkLCdX0I/AAAAAAAAAP8/HgDXLapwpAw/s320/select.gif) left top no-repeat;line-height:26px;text-indent:12px;border:solid 1px #83BBD9;cursor:default;}
.dropDownList span.over{background-position:left bottom;border-color:#B4C91A;}
.dropDownList ul{background:#eee;width:200px;display:none;}
.dropDownList ul li{height:20px;width:100%;padding:3px 0;text-indent:12px;cursor:default;}
.dropDownList ul li.over{background:#ccc;}
.dropDownList ul.show{display:block;}

JavaScript模拟下拉菜单，做的仓促，虚心接受批评。

请选择
1988
1989

请选择年份

性别
男
女

请选择性别

幼儿班
小学
初中

请选择学历

// JavaScript Document
var ____configArray;
function __initDropDownList(configArray){
//获取Select菜单
____configArray=configArray;
var existArray=configArray.split("|");
for(var i=0;i

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • Javascript实现简单二级下拉菜单实例

    复制代码 代码如下: <span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&

  • JavaScript多级下拉菜单代码(简单实用)

    JavaScript下拉菜单 * { padding:0; margin:0; } body { font-family:verdana, sans-serif; font-size:small; } #navigation, #navigation li ul { list-style-type:none; } #navigation { margin:20px; } #navigation li { float:left; text-align:center; position:relati

  • javascript 三级下拉选择菜单Levels对象

    JavaScript: 复制代码 代码如下: <script type="text/javascript"> var level1 = ["Beijing", "GuangZhou", "ShangHai"]; var level2 = [["ZhaoYang", "TianTan", "GuGong"], ["Tianhe", &qu

  • JavaScript 双级下拉菜单实现代码

    JavaScript下拉菜单 * { padding:0; margin:0; } body { font-family:verdana, sans-serif; font-size:small; } #navigation, #navigation li ul { list-style-type:none; } #navigation { margin:40px; }/*可有可无属性,是内容与边的距离*/ #navigation li { float:left; text-align:cent

  • javascript实现在下拉列表中显示多级树形菜单的方法

    javascript实现在下拉列表中显示多级树形菜单的方法

    本文实例讲述了javascript实现在下拉列表中显示多级树形菜单的方法.分享给大家供大家参考.具体如下: 这里演示在下拉列表框中显示分级的菜单,在很多网站都可以看到的效果,很实用,下拉列表框中的选项是利用JS控制输出,如果你有更好的办法不用JS来显示,那最好了,因为像这种菜单用JS来实现,多多少少有点麻烦. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

  • javascript下拉列表中显示树形菜单的实现方法

    javascript下拉列表中显示树形菜单的实现方法

    很简单的一个使用:点击菜单,能够显示下面的或者不显示. 1.主要目的:展现的是的一个菜单项,然后点击一下,隐藏,点一下,弹出下面的内容 用到的是 overflow:hidden    和  overflow="visible"这两个属性 在点击的function中,设置属性应该 node.style.overflow="visible";当然设置tr的高度也是很重要的,要恰好让其他的选项隐蔽 2.采用同样的技术,多加几个,但是就是传参数比较麻烦,采用this传参很常

  • javascript支持区号输入的省市二级联动下拉菜单

    省市二级联动下拉菜单,增加了区号输入.多组选项共用一组数据. 选择地区,可以获取区号,填写区号自动选取地区. 某些地市的区号收集中. 省份 选择城区 1)inti(0);findarea();"> 省份 选择城区 1)inti(1);findarea();"> var areaList={ "北京":[["选择城区","10"],["东城区",""],["西城区&q

  • JavaScript 下拉菜单实现代码

    JavaScript下拉菜单 * { padding:0; margin:0; } body { font-family:verdana, sans-serif; font-size:small; } #navigation, #navigation li ul { list-style-type:none; } #navigation { margin:20px; } #navigation li { float:left; text-align:center; position:relati

  • javascript下拉列表菜单的实现方法

    javascript下拉列表菜单的实现方法

    之前写过这个<javascript下拉列表中显示树形菜单的实现方法>菜单的体现,但是在写了之后就发现了,不太适合,高度要精准控制,并且还不是很好看.现在采用table来封装,我们知道table的每一行写满了之后,下一行会自动加,这个比之前我们自己制定高度好很多. 1.点击之后都可以并存的情况(只需函数写法不一样就可) dispaly也是自己设置的,通过父节点来操作子节点,显示与否: /* function open1(node){ //通过父节点来操作兄弟节点 当点击之后出现之后,直接就能打开

  • JavaScript模拟下拉菜单代码

    优点:点击body区域同样可以隐藏下拉菜单,且不会和body已有的onclick事件冲突. 缺点:请大家指出,虚心接受!运行框代码看似繁多,实属无奈,请下载附件,以便更好观察或修改~! 下拉菜单 body{margin:20px auto;font-family:Arial, Helvetica, sans-serif;font-size:12px;width:950px;height:400px;border:solid 1px #aaa; position:relative;padding:

  • javascript手风琴下拉菜单实现代码

    javascript手风琴下拉菜单实现代码

    手风琴下拉菜单实现的效果更灵活,不同与传统的下拉菜单,本文就为大家分享一段javascript手风琴下拉菜单实现代码,先看一看效果图: 具体的javascript手风琴下拉菜单代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>手风琴下拉菜单效果</title> <script src="js/jquery-1.11.1.j

  • JavaScript简单下拉菜单实例代码

    JavaScript简单下拉菜单实例代码

    本文实例讲述了JavaScript简单下拉菜单实例代码.分享给大家供大家参考.具体如下: 这是一款JavaScript实现的下拉菜单演示代码,带渐变效果的CSS+jQuery菜单,向下滑出型的菜单,最高支持两级,网上常见到的一种菜单风格,希望大家喜欢哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-xlcd-down-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/

  • jQuery实现带动画效果的多级下拉菜单代码

    jQuery实现带动画效果的多级下拉菜单代码

    本文实例讲述了jQuery实现带动画效果的多级下拉菜单代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的多级下拉菜单,带动画效果,所有的元素以ul li ul li ul li的循环格式嵌套 如果没有下级分类 就用li a结束嵌套,代码内不用toggle()的原因是为了在收缩菜单的时候同时也将该菜单的下级菜单以后的所有元素都隐藏. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-animate-style-dow

  • jquery实现漂亮的二级下拉菜单代码

    jquery实现漂亮的二级下拉菜单代码

    本文实例讲述了jquery实现漂亮的二级下拉菜单代码.分享给大家供大家参考.具体如下: 这里介绍一款基于jquery实现的网站下拉菜单,黑色风格,很漂亮,本菜单需要点击主菜单后的小三角符号才下拉出二级菜单,并不是有些菜单,是鼠标移上主菜单的时候就滑过,至于哪一种,就看个人的喜好了 先来看看运行效果: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-bg-2-level-down-show-menu-codes/ 具体代码如下: <!DOCTYPE ht

  • javascript实现下拉菜单效果

    javascript实现下拉菜单效果

    用Javascript实现下拉菜单,供大家参考,具体内容如下 正在学习大前端中,有代码和思路不规范不正确的地方往多多包涵,感谢指教 下拉菜单,或者侧拉菜单在实际开发当中非常的实用 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padd

  • JavaScript实现下拉菜单的显示隐藏

    JavaScript实现下拉菜单的显示隐藏

    本文实例为大家分享了JavaScript实现下拉菜单显示隐藏的具体代码,供大家参考,具体内容如下 有时需要这种页面效果: 鼠标移动到元素上面时,实现下拉菜单 鼠标移开元素后,下拉菜单不见了 实现思路 1.一个盒子里包含上下两部分,下面部分为子菜单,先设置为隐藏:display: none; 2.当鼠标移动到盒子上:触发事件- - -onmouseover ,js设置下面部分子菜单的display值为- - -block,使子菜单显示 3.鼠标移开盒子:触发事件- - -onmouseout ,j

  • HTML+CSS+JavaScript实现下拉菜单效果

    HTML+CSS+JavaScript实现下拉菜单效果

    本文实例为大家分享了HTML+CSS+JavaScript实现下拉菜单效果的具体代码,供大家参考,具体内容如下 实现思路: HTML 方面,导航栏的每个 <li> 元素里面包含 <a> 和 <ul> ,将 <li> 设置为相对定位, 将 <ul> 设置为绝对定位,并将 <ul> 的 display 属性设置为 none .通过 js 给导航栏的每个 <li> 添加事件监听器,当鼠标覆盖 <li> 时,令 <

  • Javascript级联下拉菜单以及AJAX数据验证核心代码

    虽然也使用了Prototype.js来编写,但是由于对它的不了解,类的实现仍然是使用了<JavaScript高级程序设计>里的方法.使用AJAX进行数据验证时,最初使用的是XML来当数据源,然而在使用了一段时间后,发现XML效率太低,于是又使用JSON来做为数据源. 一年过去了,客户又提出了新的需求,最初是只要输入框的两个数据相符就行,现在的要求是两个下拉菜单的数据也要相符,于是,我利用此机会,将代码重构了一次. 需求: 1.根据下拉菜单产品名称.产品包装的选择,右面的图片要进行相应的变化.

随机推荐