Home >Web Front-end >JS Tutorial >How to hide the drop-down box in javascript
How to hide the drop-down box in javascript
- 王林Original
- 2021-10-26 17:18:362017browse
Javascript method to achieve the effect of hiding the drop-down box: [function moreCon(){ var backg = document.getElementById('colorChange'); var mdiv = document...].
#The operating environment of this article: windows10 system, javascript 1.8.5, thinkpad t480 computer.
Clicking to show or hide the drop-down box is a common effect in work, so how to achieve this effect?
Let’s first take a look at the effect after implementation:
Specific implementation code:
<!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>JS点击显示或隐藏下拉框</title>
<style type="text/css">
html,body,div,ul,li{padding: 0;margin: 0;}
li{list-style: none;}
a{text-decoration: none;color: #ccc;font-size: 13px;}
#top{width: 100%;background: #2D2D2D;height: 30px;}
.topli{float: left;height: 30px;line-height: 30px;}
.topli a{display:block;padding: 0 14px;height: 30px;}
.topli a:hover{background:#444;}
.more{position: absolute;top: 30px;background: #fff;display: none;border: 1px solid #c2c2c2;z-index: 999;border-top: none;}
.more a{color: #3366CC;}
.more a:hover{background: #f0f0f0;}
</style>
<script type="text/javascript">
function moreCon(){
var backg = document.getElementById('colorChange'); //定义变量
var mdiv = document.getElementById('moreContent');
if (mdiv.style.display=='block') { //if else判断ID为moreContent的display是否为block “==”为“等于” 为比较运算符
mdiv.style.display='none';
backg.style.background='#2D2D2D'; //修改样式
backg.style.color='#ccc';
}
else
{
mdiv.style.display='block';
backg.style.background='#fff';
backg.style.color='#3366CC';
}
}
</script>
<!-- JS点击显示或隐藏下拉框 end -->
</head>
<body>
<ul id="top">
<li class="topli"><a href="">搜索</a></li>
<li class="topli"><a href="">图片</a></li>
<li class="topli"><a href="">地图</a></li>
<li class="topli"><a href="">新闻</a></li>
<li class="topli">
<a href="javascript:void()" onclick="moreCon()" id="colorChange">更多</a>
<!-- 对于浏览器来说 onclick会比href先执行 -->
<div class="more" id="moreContent">
<ul>
<li><a href="">云端硬盘</a></li>
<li><a href="">日历</a></li>
<li><a href="">翻译</a></li>
<li><a href="">Blogger</a></li>
</ul>
</div>
</li>
</ul>
</body>
</html>Tips:
js comparison operator: "==" is "equal to", "===" is "completely equal (value and type)"
a's "href" and "onclick": Browse The processor will first execute the onclick event, and then execute the action under the href attribute. In order to maintain the css style of href without affecting the onclick event, you can write:
<a href="javascript:void()" onclick="moreCon()" id="colorChange">更多</a>
Recommended learning: javascript video tutorial
The above is the detailed content of How to hide the drop-down box in javascript. For more information, please follow other related articles on the PHP Chinese website!