溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“javascript如何實現隱藏下拉框”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“javascript如何實現隱藏下拉框”吧！
javascript實現隱藏下拉框效果的方法：【function moreCon(){ var backg = document.getElementById('colorChange'); var mdiv = document...】。
本文操作環境：windows10系統、javascript 1.8.5、thinkpad t480電腦。
點擊顯示或隱藏下拉框是工作中常見的一種效果，那么這種效果該如何實現呢？
我們先來看下實現后的效果：
具體實現代碼：
<!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>提示：
js的比較運算符：“==”為“等于”，“===”為“完全相等（值和類型）”
a的“href”與“onclick”：瀏覽器會先執行onclick事件，在執行href屬性下的動作。為了保持href的css樣式，又不會影響onclick事件，可以寫成：
<a href="javascript:void()" onclick="moreCon()" id="colorChange">更多</a>
感謝各位的閱讀，以上就是“javascript如何實現隱藏下拉框”的內容了，經過本文的學習后，相信大家對javascript如何實現隱藏下拉框這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
