單擊按鈕后，僅使用 JS 腳本的第一部分，第二次單擊后無效果

Question

嘿，這是我的 function

function open() {
            
        document.getElementById("main").style.marginLeft = "20%";
        document.getElementById("mySidebar").style.width = "20%";
        document.getElementById("mySidebar").style.display = "block";
    document.getElementById("openNav").style.display = 'inline-block';
        }
function close() {
        document.getElementById("main").style.marginLeft = "0%";
        document.getElementById("mySidebar").style.display = "none";
        document.getElementById("openNav").style.display = "inline-block";
}

function Test() {
var item = document.getElementById("main").style.marginLeft ="";
if (item = "0%")
{
    w3_open()
    item = document.getElementById("main").style.marginLeft = "20%";
} else if (item = "20%")
{
    w3_close()
}

}

第一部分工作完美，但第二次點擊后沒有任何反應..

Idk怎么了，有人可以提出一些建議嗎？

///更新

單擊此后：

<button id="openNav" class="w3-button w3-teal w3-xlarge" onclick="Test()">&#9776;</button>

我可以打開側邊欄，但再次單擊后我無法關閉它。 ：/

Answer 1

這里有很多問題，包括在應該執行比較時分配值（在一些評論和其他答案中指出）。

即使語法是固定的，我懷疑 function 永遠不會工作，因為marginLeft值從未設置為開始，這意味着open()和close()都不會被調用，因為它們只有在特定值是時才會被調用成立。

一切都可以在Test()方法中通過一次評估得到簡化。 這是一個更新版本：

function open() {
   document.getElementById("main").style.marginLeft = "20%"
   document.getElementById("mySidebar").style.width = "20%"
   document.getElementById("mySidebar").style.display = "block"
   document.getElementById("openNav").style.display = "inline-block"
}

function close() {
   document.getElementById("main").style.marginLeft = "0%"
   document.getElementById("mySidebar").style.display = "none"
   document.getElementById("openNav").style.display = "inline-block"
}

function Test() {
   var item = document.getElementById("main").style.marginLeft

   // simplified condition
   if (item == "20%") close()
   else open()
}

Answer 2

item永遠不會等於"0%" ，因為你在這里專門將它設置為"" ：

var item = document.getElementById("main").style.marginLeft ="";

這就是為什么它總是轉到 else 語句的原因。 將該行更改為var item = document.getElementById("main").style.marginLeft

還剛剛注意到你的 if else 語句搞砸了 - 你需要使用==而不是= 。 您的 if 語句當前正在分配item = "0%"但您希望它評估 if item == "0%" 。 所以這實際上是它總是打開的另一個原因 - 因為在 if 語句中分配一個值基本上總是評估為真。 嘗試解決這些問題，讓我知道代碼是否有效

還有一點注意 - w3_open()和w3_close()應該只是open()和close()

Answer 3

您需要在樣式表中將 id 為“main”的元素的默認 marginLeft 設置為 0%。 然后改變你的功能如下：

function open() {
        
    document.getElementById("main").style.marginLeft = "20%";
    document.getElementById("mySidebar").style.width = "20%";
    document.getElementById("mySidebar").style.display = "block";
    }
function close() {
    document.getElementById("main").style.marginLeft = "0%";
    document.getElementById("mySidebar").style.display = "none";
}

function Test() {
    var item = document.getElementById("main").style.marginLeft;
    if (item == "0%"){
        open()
    } else if (item == "20%"){    
         close()
       }
}

Answer 4

我希望它有效

如果沒有。請告訴我

首先你為什么要寫這個。因為它們在打開和關閉 function 時是一樣的？

Id("openNav").style.display='inline-block';

在

function close() and open()

用上面的注釋試試這個。

function open() { 

document.getElementById("main").style.marginLeft = "20%"; 

  document.getElementById("mySidebar").style.width = "20%";  
 
document.getElementById("mySidebar").style.display = "block"; 

 document.getElementById("openNav").style.display = 'inline-block'; } 
 function close() { 

 document.getElementById("main").style.marginLeft = "0"; 

 document.getElementById("mySidebar").style.width = "0 !important"; 

 document.getElementById("openNav").style.display = "inline-block"; } 
function Test() { 
var item=document.getElementById("main").style.marginLeft ;
 if (item == "0") { 
 w3_open() item = document.getElementById("main").style.marginLeft ;
} else if (item == "20%") { w3_close() }