代码如下：

<!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. C# Unity游戏开发——Excel中的数据是如何到游戏中的 （一）

    引言 现在做游戏开发的没有几个不用Excel的,用的最多的就是策划.尤其是数值策划,Excel为用户提供强大的工具,各种快捷键,各种插件,各种函数.但是作为程序来说其实关注的不是Excel而是它最终形 ...

  2. 第四组UI组件：AdapterView及子类

    AdapterView组件是一组重要的组件,AdapterView本省是一个抽象基类,它派生的子类在用法上十分相似,只是显示界面与一定的区别,因此这次针对它们的共性集中讲解,并突出介绍他们的区别. A ...

  3. 基于ASIO的协程与网络编程

    协程 协程,即协作式程序,其思想是,一系列互相依赖的协程间依次使用CPU,每次只有一个协程工作,而其他协程处于休眠状态.协程可以在运行期间的某个点上暂停执行,并在恢复运行时从暂停的点上继续执行. 协程 ...

  4. Nginx之RTMP

    1. RTMP协议介绍 RTMP(Real Time Messaging Protocol)实时消息传送协议是Adobe Systems公司为Flash播放器和服务器之间音频.视频和数据传输开发的私有 ...

  5. 浅谈Socket长连+多线程[原创，欢迎指点]

    前戏 [PS:原文手打,转载说明出处] [PS:博主自认为适用于云平台设备管控,且适用于IM主控] 好久没来了,13年时还想着多写一些博客,这都17年过年,年前也写一写Scoket+多线程,不足之处, ...

  6. Android开发系列之屏幕密度和单位转换

    由于Android的开源性,所以目前市面上面Android手机的分辨率特别多,这样的话就给我适配带来了一定的难度.要想做好适配,我们首先应该明白什么是分辨率.PPI.屏幕大小等概念,还有在不同的屏幕密 ...

  7. ASP.NET\MVC 解决C#上传图片质量下降，图片模糊，水印有杂点的问题

    对图片处理这一块不是很懂,自己写不出来,这些年一直没有停止找一个上传图片质量不下降,加水印不会导致模糊和水印周边产生杂点的代码. 网上基本上99.9%的代码处理图片质量都是下面这两句: //设置质量 ...

  8. KB奇遇记(5)：奇葩的用人制度

    8月份入职,公司不给我们正式任命,导致了我们开展工作困难重重,基本上很少有人会鸟你,做事仿佛名不正言不顺.哪怕你是未来信息部的老大也一样,网管们根本不买你的账.所以做ERP选型,做旧OA的选型以及加密 ...

  9. CSS实现的几款不错的菜单栏

    前言 自从做了智慧城市这个项目之后,我一个做后端的开发者,瞬间转为前端开发,不过我还是很喜欢前端的.前端那些事,其实蛮有意思的,HTML实现的是静态的,使用ajax之后就可以和数据库交互了,加上js和 ...

  10. 如何编写一个gulp插件

    很久以前,我们在"细说gulp"随笔中,以压缩JavaScript为例,详细地讲解了如何利用gulp来完成前端自动化. 再来短暂回顾下,当时除了借助gulp之外,我们还利用了第三方 ...