Javascript点击显示或隐藏下拉框

效果图：

代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>JS点击显示或隐藏下拉框</title>
 6 <style type="text/css">
 7     html,body,div,ul,li{padding: 0;margin: 0;}
 8     li{list-style: none;}
 9     a{text-decoration: none;color: #ccc;font-size: 13px;}
10     #top{width: 100%;background: #2D2D2D;height: 30px;}
11     .topli{float: left;height: 30px;line-height: 30px;}
12     .topli a{display:block;padding: 0 14px;height: 30px;}
13     .topli a:hover{background:#444;}
14     .more{position: absolute;top: 30px;background: #fff;display: none;border: 1px solid #c2c2c2;z-index: 999;border-top: none;}
15     .more a{color: #3366CC;}
16     .more a:hover{background: #f0f0f0;}
17 </style>
18 <script type="text/javascript">
19     function moreCon(){
20         var backg = document.getElementById('colorChange');  //定义变量
21         var mdiv = document.getElementById('moreContent');
22         if (mdiv.style.display=='block') {                  //if else判断ID为moreContent的display是否为block   “==”为“等于” 为比较运算符
23             mdiv.style.display='none';
24             backg.style.background='#2D2D2D';                //修改样式
25             backg.style.color='#ccc';
26         }
27         else
28             {
29                 mdiv.style.display='block';
30                 backg.style.background='#fff';
31                 backg.style.color='#3366CC';
32             }
33     }
34 </script>
35 <!-- JS点击显示或隐藏下拉框 end -->
36 </head>
37 <body>
38 <ul id="top">
39     <li class="topli"><a href="">搜索</a></li>
40     <li class="topli"><a href="">图片</a></li>
41     <li class="topli"><a href="">地图</a></li>
42     <li class="topli"><a href="">新闻</a></li>
43     <li class="topli">
44         <a href="javascript:void()" onclick="moreCon()" id="colorChange">更多</a>
45         <!-- 对于浏览器来说  onclick会比href先执行 -->
46         <div class="more" id="moreContent">
47             <ul>
48                 <li><a href="">云端硬盘</a></li>
49                 <li><a href="">日历</a></li>
50                 <li><a href="">翻译</a></li>
51                 <li><a href="">Blogger</a></li>
52             </ul>
53         </div>
54     </li>
55 </ul>
56 </body>
57 </html>

知识点：

1、if条件语句详细介绍与实例：http://www.w3school.com.cn/js/js_if_else.asp

2、js的比较运算符：“==”为“等于”，“===”为“完全相等（值和类型）”，详细参考：http://www.w3school.com.cn/js/js_comparisons.asp

3、a的“href”与“onclick”：浏览器会先执行onclick事件，在执行href属性下的动作。为了保持href的css样式，又不会影响onclick事件，可以写成

 <a href="javascript:void()" onclick="moreCon()" id="colorChange">更多</a>

转载于:https://www.cnblogs.com/rm1314/p/3492644.html

Javascript点击显示或隐藏下拉框相关推荐

列表隔行变色、显示和隐藏下拉菜单、列表的高亮显示效果
列表隔行变色 <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset=" ...
Android之解决webview加载第三方网页点击弹不出下拉框（html页面里面的select标签）
1 问题决webview加载第三方网页点击弹不出下拉框(html页面里面的select标签),我们访问youtube.com官网,点击网站的视频,点击视频右上角三个点设置,然后点击播放设置然后点 ...
html下拉菜单省对应的市,javascript基于DOM实现省市级联下拉框的方法
省市级联下拉框 var provs = { "江西省": ["南昌市", "景德镇", "九江", "鹰潭&q ...
Vue3.0 使用 ref 判断目标 node 区域之外的点击事件（实现下拉框、弹窗关闭功能）
有时候会遇到点击目标区域绑定事件 / 展示效果,然后点击目标区域之外的地方就关闭效果 / 触发另一事件,为了实现这样的功能,我们需要通过比对 node 节点来进行判断,在下面我会使用 Vue3.0 的 ...
php下拉列表框是隐藏变色的代码,jQuery设置下拉框显示与隐藏效果的方法分析...
本文实例讲述了jQuery设置下拉框显示与隐藏效果的方法.分享给大家供大家参考,具体如下: jQuery的 hide() 和 show() 方法分别用来隐藏和显示 HTML 元素,而 toggle() ...
文本域自定义下拉框支持模糊检索关键字高亮上下选择
转载自:文本域自定义下拉框支持模糊检索关键字高亮上下选择一.需求需要创建一个常见问题库,填写存在问题时可以下拉选择,可以模糊搜索,也可以手写.如果选择了问题库中的内容,自动填充内容到存在问 ...
《Cocos Creator游戏实战》实现下拉框按钮ComboBox控件
实现下拉框按钮ComboBox控件创建节点编写脚本该功能已收录在Many Widgets插件中,使用Cocos Creator 3.x版本的小伙伴可以用该插件快速生成下拉框ComboBox控件. ...
html下拉框只选择年份和月份,有只显示年和月的javascript时间控件吗？
//包含js文件 (1)只选择日期 (2)选择日期和小时 (3)选择日期和小时及分钟 //调用函数这下面是setmonth.js 这是Calendar.js /**//** *本日历选择控件由tia ...
[JavaScript]搜索框中文/英文/拼音匹配过滤逻辑/input的focus和下拉框的click冲突解决/点击条目后focus二次点击不生效问题解决
效果图思路: 输入框的逻辑: 要监控input的输入,根据框架自己选择绑定事件要有focus和blur的方法,input的focus和下拉框的click冲突的话应该用mousedown 展开下拉框 ...

Javascript点击显示或隐藏下拉框

Javascript点击显示或隐藏下拉框相关推荐

最新文章

热门文章