Question

我对前端网络开发领域相当陌生，我只研究了HTML / CSS大约一个半月，只用了大约一周或更短的时间进入JS。因为我想练习从不同网站学到的东西，所以我自己来测试自己的知识。如果我提出太多问题，我想提前道歉，但我不知道有任何人可以与我们分享编码问题。

所以我想制作（仅用于测试）一个show / hide div，当你单击带有JS的按钮时，它会被激活。我可以让它显示，但我想尝试使用＆＃34; if / else＆＃34;来隐藏/显示它。功能。我认为我的代码是正确的，但它似乎没有用，我无法找到解决方案。我将与您分享我的代码（实际上我遇到问题的部分），如果您能帮我找到解决方案，我将非常感激。

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会识别＆＃34;的style.display＆＃34;作为一种财产，因为Brackets并没有强调它。非常感谢您提前的时间，我希望很快我也能用我所知道的方式帮助一些人！

另外 - 一个附带问题 - 你对树屋有什么看法？我听说过关于他们的非常好的事情，我正在考虑报名以进一步了解我的知识。

度过美好的一天！

Answer 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 clases：

.hide{
    display:none;
}

JS：

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

从未使用过Treehouse，但对我自己来说，最好的老师是一个很好的IDE网站，比如Atom of VScode，谷歌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（''））

Answer 2

您的代码不起作用，因为您没有将display属性分配给适当的值（block / none）。你使用了比较运算符（“==”）而不是equals（“=”）。

 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的显示属性。

Answer 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';

用JS和介绍点击显示/隐藏div

3 个答案: