单击按钮后，仅使用 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() }