Question

我想切换两个按钮提供的两个菜单。问题是当我点击按钮一时，它显示菜单绑定按钮一，但当我点击另一个时，它显示两个而不是隐藏第一个和副反之亦然，在我的登录页面上。菜单由ID标识; ＆＃39; reqpwd＆＃39;并且＆＃39;注册＆＃39;在html / JS中。什么是狼？如果可能，还建议改进代码。我的JS代码：

    <script>
  window.onload = function() {
  document.getElementById('reqpwd').style.display = 'none';
  document.getElementById('signup').style.display = 'none';
 };
function chk(elm) {
var signup_ = signup.id;
var reqpwd_ = reqpwd.id;
elm_ = elm.id;
if (elm_ == reqpwd_){
 hide(signup_);
 show(reqpwd_);
}
if (elm_== signup_){
 hide(reqpwd_);
show(signup_);
}
};

function show(abc) {
var menuBox  = document.getElementById(abc);
  if(menuBox.style.display == "none") { // if is menuBox displayed, hide it
    menuBox.style.display = "block";
} };

    function hide(abc){ // if is menuBox hidden, display it
var menuBox  = document.getElementById(abc);
if(menuBox.style.display == "block"){
    menuBox.style.display == "none";
    }
  };
</script>

Answer 1

而不是menuBox.style.display == "none";尝试使用menuBox.style.visibility== "hidden";

修改我在代码中更改了一些内容。对于我在加载时设置样式的方式（缺少HTML）并没有给我很多意义，所以我不得不使用对我有意义的ID。

修改好的，我的坏。我更新了代码。我认为问题出在hide上，你在menuBox.style.display == "none";上使用的是双等号而不是单等号。因此，菜单永远不会隐藏。

https://codepen.io/juanferrer/pen/qmOmWa

Answer 2

最后我使用flag变量作为状态指示器进入了类似的东西..现在唯一的要求是检查切换以及通过相同的按钮消失相关菜单。如果注册菜单已经打开，则注册或重置按钮应该关闭它，反之亦然。

window.onload = function() {
document.getElementById('regd').style.visibility = 'hidden'; //regisration msg
document.getElementById('rset').style.visibility = 'hidden'; //reset msg
document.getElementById('reqpwd').style.display = 'none';
document.getElementById('signup').style.display = 'none';
};
var flag = 0;

function chk(elm) {
var signup_ = signup.id;
var reqpwd_ = reqpwd.id;
elm_ = elm.id;

if (elm_ == reqpwd_ && flag === 0 || elm_ == reqpwd_ && flag == 2) {
    flag = 1;
    hide(signup_);
    show(reqpwd_);

}
if (elm_ == signup_ && flag === 0 || elm_ == signup_ && flag == 1) {
    flag = 2;
    show(signup_);
    hide(reqpwd_);

}
if (elm_ == reqpwd_ && flag == 1 || elm_ == signup_ && flag == 2) {
    hide(elm_);
    flag = 0;
}

};

function show(abc) {
var menuBox = document.getElementById(abc);
if (menuBox.style.display === "none") { // if is menuBox hidden, display it
    menuBox.style.display = "block";
}
};

function hide(abc) { // if is menuBox 
var menuBox = document.getElementById(abc);
if (menuBox.style.display === "block") { //if displayed, hide it
    menuBox.style.display = "none";
}
};

使用JS中的按钮切换菜单 - 但它显示两个菜单

2 个答案: