代码如下：

<!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. SQL查询根节点

    /* 标题:查询指定节点及其所有父节点的函数 作者:爱新觉罗.毓华(十八年风雨,守得冰山雪莲花开) 时间:2008-05-12 地点:广东深圳 */ create table tb(id varcha ...

  2. 如何改变xls中的单元格左上角的图标

    点绿色小三角的是文本型数字,是不能参与加减运算的.首先选中含有绿色小三角的单元格,右击鼠标选择,设置单元格格式, 数字选项卡,选择常规

  3. MyBatis 延迟加载

    在sqlMapConfig中进行设置 <configuration> <settings> <!--延迟加载的总开关--> <setting name=&qu ...

  4. Android自定义控件系列(四)—底部菜单(下)

    转载请注明出处:http://www.cnblogs.com/landptf/p/6290862.html 在app中经常会用到底部菜单的控件,每次都需要写好多代码,今天我们用到了前几篇博客里的控件来 ...

  5. 第三章 Python 的容器： 列表、元组、字典与集合

    列表是Python的6种内建序列(列表,元组,字符串,Unicode字符串,buffer对象,xrange对象)之一, 列表内的值可以进行更改,操作灵活,在Python脚本中应用非常广泛 列表的语法格 ...

  6. Struts2标签--S:iterator----jsp页面遍历双层list

    双层遍历,第一层list为classes,里面放的是班级class对象,第二层为班级class里的小组groups.     <s:iterator value="classes&qu ...

  7. ArcGIS Desktop 10.5 安装实录

    ArcGIS Desktop 10.5 安装实录 by 李远祥 几天前已经收到ArcGIS10.5的最终版安装介质,终于有时间可以安装一下.尽管ArcGIS10.5系列中,桌面软件不是主角,但笔者还是 ...

  8. indexOf()--数组去重

    @(JavaScript) 数组去重方法有多中,这里列举出自己认为比较容易理解的方法. 思路: 创建一个新的空数组,用来存放去重后的新数组. 利用for循环循环遍历需要去重的数组. 利用indexOf ...

  9. 谨慎能捕千秋蝉（一）——XSS

    最近在研读<白帽子讲web安全>和<Web前端黑客技术揭秘>,为了加深印象,闲暇之时做了一些总结. 下面是书中出现的一些专有词汇: POC(Proof Of Concept): ...

  10. React库

    一.React概述 React是一个是一个开源的js库,用来为数据渲染视图的,由facebook,Instagram社区维护的.(例如美团.阿里.airbnb都在使用React开发) 为什么会出现Re ...