代码如下：

<!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. [ Android 五种数据存储方式之一 ] —— SharedPreferences存储数据

    SharedPreferences类,它是一个轻量级的存储类,特别适合用于保存软件配置参数. 主要是保存一些常用的配置比如窗口状态,一般在Activity中 重载窗口状态onSaveInstanceS ...

  2. Intent的属性及Intent-filter配置——指定Action、Category调用系统Activity

    Intent代表了启动某个程序组件的“意图”,实际上Intent对象不仅可以启动本应用内程序组件,也可启动Android系统的其他应用的程序组件,包括系统自带的程序组件——只要权限允许. 实际上And ...

  3. 如何让Docker容器随宿主机的启动而自动启动

    使用Docker容器部署服务时,不仅需要让服务随Docker容器的启动而启动,还需要让Docker容器随宿主机的启动而自动启动,为此Docker提供了Docker run的restart参数 #doc ...

  4. （二）Hololens Unity 开发之 语音识别

    学习源于官方文档 Voice input in Unity 笔记一部分是直接翻译官方文档,部分各人理解不一致的和一些比较浅显的保留英文原文 (二)Hololens Unity 开发之 语音识别 Hol ...

  5. Oracle检查锁及其等待的行ROWID

    SELECT l.session_id sid ,        substr(o.owner,               1,               8) owner,        o.o ...

  6. [CSS3] 学习笔记-CSS动画特效

    在CSS3中,出现了很多出彩的效果,例如2D.3D以及过度.动画和多列等.这些效果为页面设计添加了很多的可选设计. 1.2D.3D转换 转换,是使元素改变尺寸.形状.位置的一种效果:通过CSS3转换, ...

  7. HTML5中的WebSocket

    在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API.WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术.这个新的API提供了一个方法 ...

  8. EntityFramework Core并发导致显示插入主键问题

    前言 之前讨论过EntityFramework Core中并发问题,按照官网所给并发冲突解决方案以为没有什么问题,但是在做单元测试时发现too young,too siimple,下面我们一起来看看. ...

  9. 使用rsync+inotify-tools+ssh实现文件实时同步

    假设某服务器架构中有两台web服务器(IP为192.168.1.252和192.168.1.254),一台代码更新发布服务器(IP为192.168.1.251),需要同步的目录是/data/www/, ...

  10. [商业_法务] 2、注册公司起名很费劲，用C++怒写个随机名字生成器

    前言 博主最近在注册公司,由于之前听说过注册公司的名字很难通过,于是便直接找代理去帮忙跑趟,为确保万无一失,还自己绞尽脑汁想了几个很奇葩的名字(噬菌体.云木.灌木.杏仁...). 但是不幸的是那些奇葩 ...