js 導航欄多項點擊顯示下拉菜單代碼
<!DOCTYPE html>
<html>
<head>
<title>Dropdown</title>
<!--<link rel="stylesheet" href="style.css">-->
<!--<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>-->
<!--<script src="js/jquery.min.js"></script>-->
<meta charset="utf-8" />
<style type="text/css">
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #1f75cf;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fafafa;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
color: white;
background-color: #1f75cf;
}
.show {
display: block;
}
</style>
</head>
<body>
<ul>
<li class="dropdown">
<a id="a" href="javascript:void(0)" class="dropbtn" onclick="showList(this)">標題 A</a>
<div class="dropdown-content" id="dropdown-a">
<a href="#">下拉 1</a>
<a href="#">下拉 2</a>
<a href="#">下拉 3</a>
</div>
</li>
<li class="dropdown">
<a id="b" href="javascript:void(0)" class="dropbtn" onclick="showList(this)">標題 B</a>
<div class="dropdown-content" id="dropdown-b">
<a href="#">下拉 1</a>
<a href="#">下拉 2</a>
<a href="#">下拉 3</a>
</div>
</li>
</ul>
<script type="text/javascript">
function showList(o) {
//1.把其他的二級ul都隱藏，
// hideList("dropdown-content" + o.id);
//把其他的二級ul隱藏方式1
hideList("dropdown-" + o.id);
//把其他的二級ul隱藏方式2
// hideList('');
//2.再切換自己的show。
// document.getElementById("dropdown-" + o.id).classList.toggle("show");
var drop = document.getElementById("dropdown-" + o.id);
if (drop.classList.contains('show')) {
drop.classList.remove('show');
// alert("yichu");
}else{
drop.classList.add('show');
// alert("xianshi");
}
}
//隱藏不是自己對應的下拉div。
function hideList(option) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.id != option) {
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
hideList("");
}
}
</script>
</body>
</html>
實現效果
這里要實現的效果是，點擊id為a的元素彈出dropdown-a的div元素，點擊id為b的元素彈出dropdown-b的div元素。
實現思路 （showList方法的實現過程）
注意事項：這里有個設計點，每一個彈出的下拉div（有dropdown-*類的div）同時有id和class。class是為了方便使用for循環對他們操作，比如這里將他們進行隱藏。第二個是為了寫css，每個下拉列表的css都是一樣的。
1.思路是使用js，獲得所有的有dropdown-content類的元素。
2.第二步有2種做法，如果沒有強迫症的話就隨便選一種就可以了。個人比較喜歡第二種。強迫症對於這2種如果不是很明白的話，可以使用上面的注釋調的alert函數調試一下。選擇第一種hidelist（“”），你會發現在執行第3步之前，所對應的dropdown-content永遠是隱藏的，由隱藏切換到顯示。所以你點擊的時候，永遠都是alert顯示。這就是這2種做法的區別。
2-1.先把所有的彈出層（dropdown-content）隱藏。函數hideList('');
2-2.第二種就是，判斷是否是點擊的a鏈接所對應的那個dropdown-content，其余的全部隱藏。函數hideList("dropdown-" + o.id);
3.最后一步就是使用toggle方法切換所對應dropdown-content元素的顯示或隱藏狀態。
4.還有一個就是當下拉菜單展開的時候，點擊窗體其他地方會把它隱藏的效果。跟模態框是一樣的。代碼在最后那幾行。
這里舉個不生動的例子，假如是動物園的個體表演。有猴子，獅子，灰熊...，每次出來一個表演。便於理解showlist（“”）方法。這里舉例的第二步是hidelist（“”）函數；
1.表演還沒開始，就先全部關起來。（全部隱藏起來）
2.然后點名，讓猴子表演。就把猴子的籠子打開。猴子就被大家看到了。（顯示猴子）
3.然后點名讓獅子表演。（又一次的點擊事件）
4.全部隱藏
5.展示獅子
以此循環。。。
轉載於:https://www.cnblogs.com/mzzone/p/10994867.html