问题：

菜单n单击显示并隐藏div

宋和颂

2023-03-14

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

共有3个答案

柴岳

2023-03-14

检查单击元素上的当前类。如果菜单打开了，就关闭它。不然打开它。

重要的代码是当当前classname为'container_show'时设置'container_hide'。

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

null

js prettyprint-override">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>

贲永思

2023-03-14

下面就来搞定。您可以只检查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>

仇飞鹏

2023-03-14

我觉得你在写很多代码。：）

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>

类似资料：

使用CSS单击显示/隐藏div

问题内容：我有一个菜单和三个隐藏的div，这些div取决于用户选择的选项。我只想使用CSS来显示/隐藏它们。我现在正在使用jquery，但我希望禁用js即可访问它。此处有人为其他人提供了此代码，但仅在div：hover或div：active时有效，当我将其更改为div：visited时它不起作用。我是否需要添加某些内容，或者这不是正确的方法？感谢您的帮助:) 问题是我的客户希望菜单被选中时此di
单击表单按钮后，隐藏按钮div并显示一个隐藏的div

我正在尝试隐藏按钮div和显示一个隐藏的div后，一个表单按钮已经被点击，加上延迟提交/重定向。下面是我想出的办法，但似乎没有100%奏效。 null null 任何建议都非常感谢
在ng-repeat内单击ng时显示隐藏的div

问题内容：我正在使用Angular.js应用程序，该应用程序通过医疗程序的json文件进行过滤。当使用ng- click单击（在同一页面上）过程名称时，我想显示每个过程的详细信息。这是我到目前为止的内容，.procedure-details div设置为显示：无：我在角度上很新。有什么建议？问题答案：删除，然后改用：这是小提琴：http : //jsfiddle.net/asmKj/ 您
jQuery实现的点击显示隐藏下拉菜单功能完整示例

本文向大家介绍jQuery实现的点击显示隐藏下拉菜单功能完整示例，包括了jQuery实现的点击显示隐藏下拉菜单功能完整示例的使用技巧和注意事项，需要的朋友参考一下本文实例讲述了jQuery实现的点击显示隐藏下拉菜单功能。分享给大家供大家参考，具体如下： PS：感兴趣的朋友可以使用如下在线工具测试上述代码：在线HTML/CSS/JavaScript前端代码调试运行工具： http://tools
在wordpress上隐藏菜单

我需要在主页上隐藏我的菜单，让它在向下滚动时出现。我正在使用Wordpress和Elementor。我能够通过安装“自定义CSS&JS”插件来实现这一点，它允许我添加任何我需要的JS代码。我使用elementor自定义CSS在菜单部分添加了以下代码： null null 然后我用我安装的插件将这个Java脚本添加到我的网站上， null null 这做了工作，但现在菜单是隐藏在所有网页上的网站和
浮动操作按钮在隐藏/显示后单击

我在使用Google的支持设计库中的FloatingActionButton时遇到了一些麻烦。按钮和onClickListener工作正常，但问题在于：当我隐藏按钮和我显示它之后，按钮不直接执行onClick方法时，点击第一次，它必须点击2次工作。我没有在onClick中做任何复杂的事情，这些事情只需要为视图运行一个简单的就可以了。下面是我的代码，尽管我怀疑那里有什么问题：

菜单n单击显示并隐藏div

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档