簡單實現(xiàn)js點擊展開二級菜單功能-創(chuàng)新互聯(lián)

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

我們擁有十多年網(wǎng)頁設(shè)計和網(wǎng)站建設(shè)經(jīng)驗，從網(wǎng)站策劃到網(wǎng)站制作，我們的網(wǎng)頁設(shè)計師為您提供的解決方案。為企業(yè)提供成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、微信開發(fā)、微信平臺小程序開發(fā)、移動網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計、等業(yè)務(wù)。無論您有什么樣的網(wǎng)站設(shè)計或者設(shè)計方案要求，我們都將富于創(chuàng)造性的提供專業(yè)設(shè)計服務(wù)并滿足您的需求。

如果，默認打開頁面進來時二級菜單是隱藏的，需要點擊才能展現(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>

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站bm7419.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章標題：簡單實現(xiàn)js點擊展開二級菜單功能-創(chuàng)新互聯(lián)
文章分享：http://bm7419.com/article10/dpdsgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、面包屑導航、網(wǎng)站維護、網(wǎng)站改版、網(wǎng)頁設(shè)計公司、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

小程序開發(fā)