Javascript 使用JS和简介在单击时显示/隐藏div

我对前端web开发领域相当陌生，我只学习HTML/CSS约一个半月，学习JS大约一周或更少。因为我想实践我从不同网站学到的东西，所以我自己制作了一个网站来测试我的知识。如果我问的问题太多，我想提前道歉，但我认识的人中没有人可以和我分享编码问题

所以我想制作一个show/hide div（只是为了测试），当你用JS点击一个按钮时，它就会被激活。我可以让它显示，但我想用“if/else”函数让它隐藏/显示。我认为我的代码是正确的，但它似乎不起作用，我找不到解决方案。我将与您分享我的代码（这部分代码实际上我有问题），如果您能帮助我找到解决方案，我将非常感激

HTML:

<button type="button" onclick="slide()" >Click Me</button>
<div class="divtest" id="dropdown">   
<span>If you are seeing this, then your JS worked! </span>
</div>

JS：

<script>
function slide() {
    var drop = document.getElementById("dropdown"); // declares the element with id="dropdown" as a var
    var dropSetting = drop.style.display;  // declares that the variable "drop"'s display property is also a variable
    if (dropSetting == "none") {  // if the current value of display = "none" ( which it is as u can see in the CSS)
        dropSetting == "block";   // Then set it to "block" 
    }
    else {                                    // if the value of display != none
        dropSetting == "none";   // then set it to "none"
    }
}

</script>

函数幻灯片（）{
var drop=document.getElementById（“dropdown”）；//将id=“dropdown”的元素声明为var
var dropSetting=drop.style.display；//声明变量“drop”的display属性也是一个变量
if（dropSetting==“none”）{//if display=“none”的当前值（正如您在CSS中看到的那样）
dropSetting==“block”；//然后将其设置为“block”
}
else{//如果display！=无的值
dropSetting==“无”；//然后将其设置为“无”
}
}

如果您对代码或任何东西有任何疑问，请随时提问，因为这是我的测试网站中包含的一个单独功能，因此它不会以任何方式连接到其他元素/属性。我先用另一种方式尝试了这段代码（没有将dropSetting声明为var，只是在if/else函数中添加了几行），但它仍然不起作用。非常感谢您提前抽出时间，我希望不久我也能用我所知道的帮助一些人

还有一个附带的问题，你对树屋有什么想法？我听说了他们的好消息，我正在考虑报名以进一步了解他们

---

祝你今天愉快

对于代码兼容性，请尝试使用方法，不要使用快捷方式，对于属性，请使用：

var drop = document.getElementById("dropdown"); 
drop.setAttribute('style', 'display: block');
var display = drop.getAttribute('display'); //Here is all the inline css, better do like below:

而且，更干净、更快的代码更好，可以制作您需要的所有css类别：

.hide{
    display:none;
}

JS:

从未使用过Treehouse，但对我来说，最好的老师是一个很好的IDE，用于类似web的Atom的VScode、google Chrome控制台（F12），这些是你的书：

-

-

这是你的问题老师： stackoverflow.com

你再也不需要什么了

---

PD：您的逻辑还可以，只是不要习惯于编写快捷方式，它们可能不适用于所有环境。（像elem.attribute而不是elem.getAttribute（“”））

您的代码不起作用，因为您没有将显示属性指定给适当的值（block/none）。您使用了比较运算符（“=”）而不是等于（“=”）

---

代码中的“==”运算符将只返回true/false，而不更改div的display属性。

问题在于您的dropSetting不是对象，只是字符串。更改对象（如果更改）时，不会更改对象（在本例中为样式）。试着这样做：

var drop = document.getElementById("dropdown"); //get reference to the object
drop.style.display = drop.style.display == 'none' ? 'block' : 'none'; //if(...){do something}else{do something else}

另一种可能性：

var dropStyle = document.getElementById("dropdown").style; 
if(dropStyle.display == 'none'){
    dropStyle.display = 'block';
}else
    dropStyle.display = 'none';

---

您在

if

和

else

中键入了。它应该是

dropSetting=“block”或
dropSetting=“无”（仅1=符号）。
 if (dropSetting == "none") {  // if the current value of display = "none" ( which it is as u can see in the CSS)
    dropSetting = "block";   // Then set it to "block" 
}
else {                                    // if the value of display != none
    dropSetting = "none";   // then set it to "none"
}

var drop = document.getElementById("dropdown"); //get reference to the object
drop.style.display = drop.style.display == 'none' ? 'block' : 'none'; //if(...){do something}else{do something else}

var dropStyle = document.getElementById("dropdown").style; 
if(dropStyle.display == 'none'){
    dropStyle.display = 'block';
}else
    dropStyle.display = 'none';