Question

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

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

这已经有效了。

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

我的代码：

＆＃13;

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";

    }
  }
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

检查点击元素的当前类。如果菜单已打开，请关闭该菜单。否则打开它。

当前的classname是'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

我认为你正在写很多代码。：）

/**
 * @Assert\LessThanOrEqual(
 *     message="Too high",
 *     propertyPath="maxSubscribers")
 * @Assert\LessThanOrEqual(
 *     message="Too high",
 *     value=100000000)
 */
private $min;

/**
 * @Assert\GreaterThanOrEqual(
 *     message="Too low",
 *     value=1)
 * @Assert\LessThanOrEqual(
 *     message="Too high",
 *     value=100000000)
 */
private $max;

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;
}

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") ;
       }
   }

菜单onclick显示并隐藏div

5 个答案: