簡單實現(xiàn)js點擊展開二級菜單功能

更新時間：2017年05月16日 10:31:33 作者：well2049

這篇文章主要教大家簡單實現(xiàn)js點擊展開二級菜單功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

雖然，jQuery已經(jīng)非常好用了，但是實際的開發(fā)項目中，還是有很多限制，比如項目組奇葩的要求，不能使用任何插件，當然，也是考慮插件占用資源，畢竟100+KB對與小型項目來說還是非常大的。我最近就遇到做個點擊展開二級菜單的要求，當然只能用原生的JS去寫來實現(xiàn)，我借鑒了網(wǎng)上的一個案例，補充一下，分享一下：

如果，默認打開頁面進來時二級菜單是隱藏的，需要點擊才能展現(xiàn)二級菜單，再點擊就是隱藏二級菜單。這里有兩個點，實現(xiàn)展現(xiàn)和隱藏用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標簽，不然會不起作用。
如果，你的頁面默認進來二級菜單是展現(xiàn)的，點擊時才關(guān)閉。直接把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>

仔細看，不然你就會發(fā)現(xiàn)你需要點擊兩次才會出現(xiàn)想要的效果。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: