菜单onclick显示和隐藏div

Question

我创建了一个包含三个项目的菜单：menu1，menu2，menu3。

我希望能够单击菜单内的每个按钮并显示相关的容器div 。

这已经有效。

再次单击该按钮时，似乎无法隐藏相关的div 。

我的代码：

 function textshowhide(text, head) { var menu_txt = "menu_txt"; for (i = 1; i <= 3; i++) { if (menu_txt + i != text) { if (document.getElementById(menu_txt + i)) document.getElementById(menu_txt + i).className = "container_hide"; } else { if (document.getElementById(text)) document.getElementById(text).className = "container_show"; } } } 

 ul { list-style-type: none; } ul li { float: left; padding: 5px 10px; border: 1px solid #000; } .container_hide { overflow: hidden; height: 0; transition: all 0.3s; width: 100%; border: 1px solid red; } .container_show { overflow: hidden; padding-top: 50px; height: 100px; transition: all 0.3s; width: 100%; border: 1px solid red; } 

 <ul> <li id="menu1" onclick="textshowhide('menu_txt1','menu1')">Menu 1</li> <li id="menu2" onclick="textshowhide('menu_txt2','menu2')">Menu 2</li> <li id="menu3" onclick="textshowhide('menu_txt3','menu3')">Menu 3</li> </ul> <div id="menu_txt1" class="container_hide">Page1</div> <div id="menu_txt2" class="container_hide">Page2</div> <div id="menu_txt3" class="container_hide">Page3</div> 

Answer 1

以下将照顾它。 您可以只检查show类是否存在就可以对其进行更改。

 function textshowhide(text, head) { var menu_txt = "menu_txt"; for (i = 1; i <= 3; i++) { if (menu_txt + i != text) { if (document.getElementById(menu_txt + i)) document.getElementById(menu_txt + i).className = "container_hide"; } else { if (document.getElementById(text)){ if(document.getElementById(text).classList.contains('container_show')) document.getElementById(text).className = "container_hide"; else document.getElementById(text).className = "container_show"; } } } } 

 ul { list-style-type: none; } ul li { float: left; padding: 5px 10px; border: 1px solid #000; } .container_hide { overflow: hidden; height: 0; transition: all 0.3s; width: 100%; border: 1px solid red; } .container_show { overflow: hidden; padding-top: 50px; height: 100px; transition: all 0.3s; width: 100%; border: 1px solid red; } 

 <ul> <li id="menu1" onclick="textshowhide('menu_txt1','menu1')">Menu 1</li> <li id="menu2" onclick="textshowhide('menu_txt2','menu2')">Menu 2</li> <li id="menu3" onclick="textshowhide('menu_txt3','menu3')">Menu 3</li> </ul> <div id="menu_txt1" class="container_hide">Page1</div> <div id="menu_txt2" class="container_hide">Page2</div> <div id="menu_txt3" class="container_hide">Page3</div> 

Answer 2

在clicked元素上检查当前类。 如果打开菜单，则将其关闭。 否则打开它。

重要的代码是当当前类名是'container_show'时设置'container_hide' 。

document.getElementById(text).className = document.getElementById(text).className == "container_show" ? "container_hide" : "container_show";

 function textshowhide(text, head) { var menu_txt = "menu_txt"; for (i = 1; i <= 3; i++) { if (menu_txt + i != text) { if (document.getElementById(menu_txt + i)) document.getElementById(menu_txt + i).className = "container_hide"; } else { if (document.getElementById(text)) document.getElementById(text).className = document.getElementById(text).className == "container_show" ? "container_hide" : "container_show"; } } } 

 ul { list-style-type: none; } ul li { float: left; padding: 5px 10px; border: 1px solid #000; } .container_hide { overflow: hidden; height: 0; transition: all 0.3s; width: 100%; border: 1px solid red; } .container_show { overflow: hidden; padding-top: 50px; height: 100px; transition: all 0.3s; width: 100%; border: 1px solid red; } 

 <ul> <li id="menu1" onclick="textshowhide('menu_txt1','menu1')">Menu 1</li> <li id="menu2" onclick="textshowhide('menu_txt2','menu2')">Menu 2</li> <li id="menu3" onclick="textshowhide('menu_txt3','menu3')">Menu 3</li> </ul> <div id="menu_txt1" class="container_hide">Page1</div> <div id="menu_txt2" class="container_hide">Page2</div> <div id="menu_txt3" class="container_hide">Page3</div> 

Answer 3

我认为您正在编写很多代码。 :)

 function textshowhide(text) { var menu_txt = "menu_txt"; for (i = 1; i <= 3; i++) { if(text==i){ document.getElementById(menu_txt+i).classList.toggle("container_show"); }else{ document.getElementById(menu_txt+i).className="container_hide"; } } } 

 ul { list-style-type: none; } ul li { float: left; padding: 5px 10px; border: 1px solid #000; } .container_hide { overflow: hidden; height: 0; transition: all 0.3s; width: 100%; border: 1px solid red; } .container_show { overflow: hidden; padding-top: 50px; height: 100px; transition: all 0.3s; width: 100%; border: 1px solid red; } 

 <ul> <li id="menu1" onclick="textshowhide('1')">Menu 1</li> <li id="menu2" onclick="textshowhide('2')">Menu 2</li> <li id="menu3" onclick="textshowhide('3')">Menu 3</li> </ul> <div id="menu_txt1" class="container_hide">Page1</div> <div id="menu_txt2" class="container_hide">Page2</div> <div id="menu_txt3" class="container_hide">Page3</div> 

Answer 4

喜欢这样：

 function textshowhide(text, head) { var menu_txt = "menu_txt"; for (i = 1; i <= 3; i++) { if (menu_txt + i != text) { if (document.getElementById(menu_txt + i)) document.getElementById(menu_txt + i).className = "container_hide"; } else { if (document.getElementById(text)) if(document.getElementById(text).className=="container_show"){ document.getElementById(text).className = "container_hide"; }else{ document.getElementById(text).className = "container_show"; } } } } 

 ul { list-style-type: none; } ul li { float: left; padding: 5px 10px; border: 1px solid #000; } .container_hide { overflow: hidden; height: 0; transition: all 0.3s; width: 100%; border: 1px solid red; } .container_show { overflow: hidden; padding-top: 50px; height: 100px; transition: all 0.3s; width: 100%; border: 1px solid red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li id="menu1" onclick="textshowhide('menu_txt1','menu1')">Menu 1</li> <li id="menu2" onclick="textshowhide('menu_txt2','menu2')">Menu 2</li> <li id="menu3" onclick="textshowhide('menu_txt3','menu3')">Menu 3</li> </ul> <div id="menu_txt1" class="container_hide">Page1</div> <div id="menu_txt2" class="container_hide">Page2</div> <div id="menu_txt3" class="container_hide">Page3</div> 

Answer 5

function textshowhide(text , head) {
   $("div").hide();
   var menu_txt = "menu_txt";
   for(let i = 1;i < 4;i++ ){
       if("menu_txt"+i != text){
          $("#menu_txt"+i).removeClass("container_show")
          $("#menu_txt"+i).addClass("container_hide") ;
      }else{
          $(text).removeClass("container_hide")
          $(text).addClass("container_show") ;
       }
   }