html 二级菜单的显示和隐藏。+代码（亲测）_隐藏二级标题的内容html-CSDN博客

本文链接：https://blog.csdn.net/ITzhongzi/article/details/52778573

div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白:

　　style="visibility: none;"

　　document.getElementById("typediv1").style.visibility="hidden";//隐藏

　　document.getElementById("typediv1").style.visibility="visible";//显示

通过设置display属性可以使div隐藏后释放占用的页面空间，如下

　　style="display: none;"

　　document.getElementById("typediv1").style.display="none";//隐藏

　　document.getElementById("typediv1").style.display="";//显

新建index.html代码如下：

 
  <!DOCTYPE html 
  > 
 
 
  < 
  html 
  > 
 

 
  < 
  head 
  > 
 
 
  < 
  meta 
  charset= 
  "utf-8" 
  > 
 
 
  < 
  title 
  ></ 
  title 
  > 
 
 
  < 
  script 
  type= 
  "text/javascript" 
  > 
 

 
  function 
  show() { 
 
 
  var 
  div = 
  document. 
  getElementById( 
  "divid"); 
 
 
  if ( 
  div. 
  style. 
  display == 
  "none") { 
 
 
  div. 
  style. 
  visibility = 
  "visible"; 
 
 
  div. 
  style. 
  display = 
  "inline-block"; 
 

   } 
  else { 
 
 
  div. 
  style. 
  visibility = 
  "hidden"; 
 
 
  div. 
  style. 
  display = 
  "none"; 
 

   } 
 


   } 
 
 
  < 
  / 
  script 
  > 
 
 
  < 
  style 
  type= 
  "text/css" 
  > 
 
 
  #divid div { 
 
 
  border: 
  1px 
  solid 
  white; 
 

   } 
 
 
  < 
  / 
  style 
  > 
 
 
  </ 
  head 
  > 
 

 
  < 
  body 
  > 
 
 
  <!-- 点击这个 img 来控制 下面 id为 divid 的div的显示与隐藏 --> 
 
 
  < 
  img 
  src= 
  "./xingshizheng.png" 
  onclick= 
  "show()" 
   /> 
 
 
  < 
  div 
  id= 
  "divid" 
  style= 
  "visibility: hidden;display: none;background-color: #666666;width: 100px;" 
  > 
 
 
  < 
  div 
  > 
 
 
  < 
  a 
  class= 
  "aclass" 
  >English 
  </ 
  a 
  > 
 
 
  </ 
  div 
  > 
 
 
  < 
  div 
  > 
 
 
  < 
  a 
  class= 
  "aclass" 
  >English 
  </ 
  a 
  > 
 
 
  </ 
  div 
  > 
 
 
  < 
  div 
  > 
 
 
  < 
  a 
  class= 
  "aclass" 
  >English 
  </ 
  a 
  > 
 
 
  </ 
  div 
  > 
 
 
  </ 
  div 
  > 
 


 
  </ 
  body 
  > 
 

 
  </ 
  html 
  > 
 