在JS中使用按鈕切換菜單 - 但它顯示兩個菜單

我想切換兩個按鈕提供的兩個菜單。問題是當我點擊按鈕一，它顯示菜單與按鈕一綁定，但當我點擊其他，它會在我的登錄頁面上顯示而不是隱藏第一個，反之亦然。菜單由ID的ID標識; html/JS中的'reqpwd'和'註冊'。什麼是蠕蟲？如果可能，還建議改進代碼。我的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>

來源

2017-04-18 ROY

如何調用'chk（）'？ *「如果可能，還建議改進代碼」* - 通過[JSPretty]（http://jspretty.com）運行它或者修復縮進：幫助我們通過展示可讀的代碼來爲您提供幫助。 – nnnnnn

請添加您的html，css，js代碼injsfiddle/snippet。這將有助於快速解決。 – RSKMR

使用html按鈕調用chk（）。每個按鈕都將id作爲參數傳遞。例如註冊菜單按鈕將其稱爲：「chk（註冊）」，密碼重置菜單也一樣; chk（reqpwd）。對不起，我是新的，所以無法編輯問題來重新發布縮進代碼。 – ROY

最後我已經使用標誌變量作爲一個狀態指示燈..現在唯一的要求是檢查切換以及由同一button..i.e消失相關的菜單登陸弄成這個樣子。如果註冊菜單已經打開，註冊或重置按鈕應關閉它，反之亦然。

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

來源

2017-04-18 11:51:25 ROY

只有一個問題。即使在聲明一個標誌來啓用一個按鈕來關閉它自己的菜單後，它也不會更新標誌變量，因此無法關閉它們各自按鈕的菜單。雖然切換菜單工作正常。 – ROY

EUREKA !!! VOILAA !!! 最後我做到了！在最後兩個IF之前添加else可以滿足所有7個條件！所以這意味着使用多個IF不建議，因爲它不同於使用ELSE IF！非常感謝你們的支持，並感謝我的無情的喧鬧，並且一次又一次地爲代碼敲響了頭兩天。 * _ * – ROY

而不是menuBox.style.display == "none";嘗試使用menuBox.style.visibility== "hidden";

編輯： 我已經在你的代碼進行了一些修改。加載樣式的時候（缺少HTML）對我來說沒有太多意義，所以我不得不使用對我有意義的ID。

編輯： 好吧，我的壞。我更新了代碼。我認爲問題出在hide上，您使用的是雙等於而不是單等於menuBox.style.display == "none";。因此菜單永遠不會隱藏。

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

來源

2017-04-18 07:58:18

爲什麼會有幫助？ – nnnnnn

沒有幫助。其次，菜單應該是不可見的，如果我壓制相同的按鈕..其中模糊了很多。 – ROY

不錯的嘗試先生胡安·費雷爾。但只有一個問題。正如我在上面的評論中強調的那樣。這些按鈕不會使自己的綁定菜單在按下時消失。註冊按鈕不會使顯示的註冊菜單消失..所以去重置菜單。其次，初始狀態應該設置爲none.means最初不可見！ – ROY

在JS中使用按鈕切換菜單 - 但它顯示兩個菜單

回答

相關問題