简单实现js点击展开二级菜单功能-创新互联

虽然，jQuery已经非常好用了，但是实际的开发项目中，还是有很多限制，比如项目组奇葩的要求，不能使用任何插件，当然，也是考虑插件占用资源，毕竟100+KB对与小型项目来说还是非常大的。我最近就遇到做个点击展开二级菜单的要求，当然只能用原生的JS去写来实现，我借鉴了网上的一个案例，补充一下，分享一下：

我们拥有十多年网页设计和网站建设经验，从网站策划到网站制作，我们的网页设计师为您提供的解决方案。为企业提供成都网站建设、成都网站制作、微信开发、微信平台小程序开发、移动网站建设、H5网站设计、等业务。无论您有什么样的网站设计或者设计方案要求，我们都将富于创造性的提供专业设计服务并满足您的需求。

如果，默认打开页面进来时二级菜单是隐藏的，需要点击才能展现二级菜单，再点击就是隐藏二级菜单。这里有两个点，实现展现和隐藏用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>

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

文章标题：简单实现js点击展开二级菜单功能-创新互联
文章分享：https://www.cdcxhl.com/article10/dpdsgo.html

成都网站建设公司_创新互联，为您提供虚拟主机、面包屑导航、网站维护、网站改版、网页设计公司、服务器托管

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容