菜单 onclick 显示和隐藏 div

卡西基扬

我创建了一个包含三个项目的菜单：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>

橙色公园

我认为您正在编写大量代码。:)

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。