溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
雖然，jQuery已經非常好用了，但是實際的開發項目中，還是有很多限制，比如項目組奇葩的要求，不能使用任何插件，當然，也是考慮插件占用資源，畢竟100+KB對與小型項目來說還是非常大的。我最近就遇到做個點擊展開二級菜單的要求，當然只能用原生的JS去寫來實現，我借鑒了網上的一個案例，補充一下，分享一下：
如果，默認打開頁面進來時二級菜單是隱藏的，需要點擊才能展現二級菜單，再點擊就是隱藏二級菜單。這里有兩個點，實現展現和隱藏用display="block"和display="none",另外就是要做一個判斷，if else的判斷當前是block還是none。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#sub_menu_1,#sub_menu_2{
display: none;
}
ul li:hover{
cursor: pointer;
}
</style>
</head>
<body>
<ul>
<li onclick = "f('sub_menu_1')">一級菜單1
<ul id="sub_menu_1">
<li>二級餐單1</li>
<li>二級餐單1</li>
<li>二級餐單1</li>
<li>二級餐單1</li>
</ul>
</li>
<li onclick="f('sub_menu_2')">一級菜單2
<ul id="sub_menu_2">
<li>二級菜單2</li>
<li>二級菜單2</li>
<li>二級菜單2</li>
<li>二級菜單2</li>
</ul>
</li>
<li>一級餐單3</li>
</ul>
<script type="text/javascript">
function f(str){
var sub_menu = document.getElementById(str);
var dis_v = sub_menu.style.display;
if(dis_v == "block")
sub_menu.style.display = "none";
else
sub_menu.style.display = "block";
}
</script>
</body>
</html>
有個注意事項就是一級菜單的li不能添加a標簽，不然會不起作用。
如果，你的頁面默認進來二級菜單是展現的，點擊時才關閉。直接把style標簽的樣式display="none"去掉就可以。同時需要修改一下js。
<script type="text/javascript">
function f(str){
var sub_menu = document.getElementById(str);
var dis_v = sub_menu.style.display;
if(dis_v == "none")
sub_menu.style.display = "block";
else
sub_menu.style.display = "none";
}
</script>
仔細看，不然你就會發現你需要點擊兩次才會出現想要的效果。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
