顯示/隱藏div點擊JS和介紹

Question

我對前端Web開發領域相當陌生，我只研究了HTML/CSS約一個半月和約1周或更少的JS 。因爲我想練習從不同網站學到的東西，所以我自己測試自己的知識。如果我問的問題太多，我想提前道歉，但是我沒有人知道我可以分享編碼問題。

所以我想（僅用於測試）一個顯示/隱藏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> 

的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」識別爲一個屬性，因爲方括號不會突出顯示它。提前感謝您的時間，我希望很快我也能夠用我所知道的幫助一些人。

另外 - 一個側面的問題 - 你對樹屋有什麼想法？我已經聽到了很多關於他們的好消息，我正在考慮加入我的知識。

祝您有美好的一天！

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

從未使用過樹，但我自己最好的老師是我們一個很好的IDE b類似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';