代码如下：

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px auto; padding:0px }
#xianshi{ width:130px; height:30px; border:1px solid #666; margin-left:400px; text-align:center; vertical-align:middle; line-height:30px; margin-top:50px}
#xianshi:hover{ cursor:pointer}
.xiang{ width:130px; height:30px; border:1px solid #666; text-align:center; margin-left:400px; line-height:30px; vertical-align:middle}
.xiang:hover{ cursor:pointer; background-color:#93F}
</style>
</head>

<body>
<div>
<div id="xianshi" onclick="xian()"></div>
<div class="xiang" style=" display:none" onclick="huan(this)">111111111</div>
<div class="xiang" style=" display:none" onclick="huan(this)">222222222</div>
<div class="xiang" style=" display:none" onclick="huan(this)">333333333</div>
<div class="xiang" style=" display:none" onclick="huan(this)">444444444</div>
<div class="xiang" style=" display:none" onclick="huan(this)">555555555</div>
<div class="xiang" style=" display:none" onclick="huan(this)">666666666</div>
<div class="xiang" style=" display:none" onclick="huan(this)">777777777</div>

</div>
</body>
<script type="text/javascript">
function xian()
{
　　var s = document.getElementsByClassName("xiang")
　　var a = document.getElementById("xianshi")
　　var nr = a.innerHTML
　　var nr1 = s.innerHTML

　　for(i=0;i<s.length;i++)
　　{
　　　　if(s[i].style.display == "none")
　　　　{
　　　　　　s[i].style.display = "block"
　　　　　　if(s[i].innerHTML == nr)
　　　　　　{
　　　　　　　　s[i].style.display = "none"
　　　　　　}

　　　　}
　　　　else
　　　　{
　　　　　　s[i].style.display = "none"
　　　　}
　　}
}

function huan(a)
{
　　var nr = a.innerHTML
　　document.getElementById("xianshi").innerHTML = nr
　　var s = document.getElementsByClassName("xiang")
　　for(i=0;i<s.length;i++)
　　{
　　　　s[i].style.display = "none"
　　}
}

</script>
</html>

运行结果如下：

js相关小实例——div实现下拉菜单的更多相关文章

  1. Bootstrap历练实例：带有下拉菜单的标签和胶囊导航

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  2. JavaScript+CSS+DIV实现下拉菜单示例

    <!DOCTYPE html> <html> <head> <title>下拉菜单示例</title> <script languag ...

  3. JS之document例题讲解1（两张表之间数据转移、日期时间选择、子菜单下拉、用div做下拉菜单、事件总结）

    作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> & ...

  4. js实现网站导航的二级下拉菜单

    http://www.codesky.net/article/201109/1200js/%E5%AE%9E%E7%94%A8%E5%AF%BC%E8%88%AA%E8%8F%9C%E5%8D%95. ...

  5. “div+css”下拉菜单

    <style> html, body { margin: 0; padding: 0; } .btn-group{ font-size: 14px; position: relative; ...

  6. js递归生成树形下拉菜单

    需求:我需要把一个单表的数据转换成类似菜单那种如图所示:我呢需要把这个菜单树放入到下框里面去如图所示: 下面是实现思路:1.第一步1.1var afTypeJson=${afTypeJson}// 这 ...

  7. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  8. Bootstrap-Plugin：下拉菜单（Dropdown）插件

    ylbtech-Bootstrap-Plugin:下拉菜单(Dropdown)插件 1.返回顶部 1. Bootstrap 下拉菜单(Dropdown)插件 Bootstrap 下拉菜单 这一章讲解了 ...

  9. 第二百四十四节，Bootstrap下拉菜单和滚动监听插件

    Bootstrap下拉菜单和滚动监听插件 学习要点: 1.下拉菜单 2.滚动监听 本节课我们主要学习一下 Bootstrap 中的下拉菜单插件,这个插件在以组件的形式我们 已经学习过,那么现在来看看怎 ...

随机推荐

  1. WPF 实现验证码功能

    产生验证码的类:ValidCode.cs public class ValidCode { #region Private Fields /// <summary> /// PI /// ...

  2. XML之XPath操作

    在学习XPath之前你应该对XML的节点,元素,属性,原子值(文本),处理指令,注释,根节点(文档节点),命名空间以及对节点间的关系如:父(Parent),子(Children),兄弟(Sibling ...

  3. 通过浏览器navigator判断浏览器版本或者手机类型&&判断微信访问

    javascript 的navigator属性,不常用,但是用处也不少,主要用处是在做浏览器兼容的问题的时候,现在有的网站已经不兼容IE6,用户假如用IE6浏览网页的话,会提示浏览器升级等信息.或者判 ...

  4. js运算符单竖杠“|”的作用

    在js整数操作的时候,相当于去除小数点,parseInt.在正数的时候相当于Math.floor(),负数的时候相当于Math.ceil() 注: 1. Math.ceil()用作向上取整. 2. M ...

  5. 6.00.1x Introduction to computation

    6.00 Introduction to Computer Science                  and  Programming • Goal: –Become skillful at ...

  6. 简单js

    js是一门弱类型的语言,要是你学过c/c++,那么上手js是一件简单的事情. js的变量是通过 var 来声明的.例如:声明一个变量 num 是这样的: var num; 我们也可以直接用 num , ...

  7. Redis 提供的好的解决方案 实例

    1.Redis 支持的String 类型的,它是 二进制的,比较安全,当有一些 图片或者css文件影响运行速度的时候,可以缓存之.

  8. 支付宝ios支付请求Java服务端签名报的一个错(ALI40247) 原创

    今天做app的支付宝支付,遇到些问题,以前做支付宝支付签名都是直接在客户端App进行,今天下了最新版本ios的支付宝支付demo,运行demo时底部有红色的显眼字体,告知用户签名必须在服务端进行... ...

  9. 模拟java的split函数，分割字符串，类似于java的split方法

    /*自定义oracle的分割函数*//*定义一个type,用户接收返回的数据集合类型*/create or replace type splitType as table of varchar2(40 ...

  10. 游戏音频技术备忘 （五）Wwise Unreal Engine 集成代码浅析 二

    AkAmbientSound类的实现 Unreal Engine提供了一个基本对象的构造器ObjectInitializer,一般来说用户创建的类总是拥有很多变量,因此 AkAmbientSound  ...