使用 JS 和介绍单击时显示/隐藏 div答案

【问题标题】：show/hide div on click with JS and introduction使用 JS 和介绍单击时显示/隐藏 div
【发布时间】：2016-04-21 17:04:48
【问题描述】：

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

所以我想制作（仅用于测试）一个显示/隐藏 div，当您单击带有 JS 的按钮时会激活该 div。我可以让它显示，但我想尝试使用“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>

CSS（有些东西没有意义，我只是添加它们来测试一下）：

.divtest {
position: absolute;
left: 25%;
bottom: 30px;
width: 50%;
height: 100px;
border: 2px solid black;
box-sizing: border-box;
box-shadow: 5px 5px 10px 3px;
text-align: center;
padding: 40px;
margin: 0 auto;
font-family: Cooper, sans-serif;
font-weight: 100;    
transition:  1s ease;
background-color: limegreen;
color: black;
display: none;
}

button {
position: absolute;
width: 50%;
left: 25%;
bottom: 130px;
padding: 10px;
border: 2px solid black;
background-color: limegreen;
box-shadow: 5px 5px 50px 3px;
color: black;
cursor: pointer;
font-family: Cooper, sans-serif;
font-weight: 100; 

}

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>

如果您对代码或任何内容有任何疑问，请随时提出，因为这是我的测试网站中包含的单独功能，因此它与其他元素/属性没有任何关联。我首先以另一种方式尝试了这段代码（没有将 dropSetting 声明为 var，只是在 if/else 函数中添加了几行）但它仍然不起作用。我不认为 JS 将“style.display”识别为一个属性，因为括号没有突出显示它。非常感谢您提前抽出时间，我希望很快我也能够帮助一些人解决我所知道的问题！

另外 - 一个附带问题 - 你对树屋有什么看法？我听说过他们的好消息，我正在考虑注册以加深我的知识。

祝你有美好的一天！

【问题讨论】：

您在if 和else 中打错字了。它应该是 dropSetting = "block"; 或 dropSetting = "none";（只有 1 = 符号）。

标签： javascript html css

【解决方案1】：

为了代码兼容性，尽量使用方法，不要使用快捷方式，用于属性使用：

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：

drop.classList.add('hide');
drop.classList.remove('hide');
drop.classList.toggle('hide');

从未使用过 Treehouse，但对我自己来说，最好的老师是一个很好的网络 IDE，比如 VScode 的 Atom、谷歌 Chrome 控制台 (F12)，这些都是你的书：

-http://www.w3schools.com/js/js_examples.asp

-https://developer.mozilla.org/en-US/docs/Web/API/Element

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

你不再需要任何东西了。

PD：你的逻辑没问题，只是不要习惯编写快捷方式，它们可能不适用于所有环境。（像 elem.attribute 而不是 elem.getAttribute('')）

【讨论】：

【解决方案2】：

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

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

代码中的

"==" 运算符只会返回 true/false，而不会更改 div 的显示属性。

【讨论】：

【解决方案3】：

问题在于您的 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';

【讨论】：