我创建了一个包含三个项目的菜单:menu1、menu2、Menu3。
我希望能够单击菜单内的每个按钮，并显示相关的容器div。
这已经管用了。
我似乎无法使相关的div在再次单击按钮时隐藏起来。
我的代码：
null
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>null
我觉得你在写很多代码。：）
null
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>
下面就来搞定。您可以只检查show类是否存在，更改它。
null
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>
检查单击元素上的当前类。如果菜单打开了，就关闭它。不然打开它。
重要的代码是当当前classname为'container_show'时设置'container_hide'。
document.getElementById(text).className = document.getElementById(text).className == "container_show" ? "container_hide" : "container_show";
null
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>