的onClick行動，以顯示更多的信息，HTML，CSS，JavaScript的

我已經創建了HTML和CSS，看起來是這樣的： https://jsfiddle.net/jw7pfb1w/的onClick行動，以顯示更多的信息，HTML，CSS，JavaScript的

正如你所看到的，我在高度做那些盒子300像素，但我有更多的信息，這是與overflow: hidden;隱藏。現在我創建了一個按鈕

//html 
<a id="show-more" class="show">Show More</a> 

/css 
.show { 
display: block; 
background-color: #75868E; 
width: 100px; 
font-size: 12px; 
text-transform: uppercase; 
display: inline-block; 
margin: 20px auto; 
cursor: pointer; 
height: 15px; 
padding: 10px 0; 
}

現在我想在點擊按鈕時看到這三個框中的所有信息。我想是這樣的

我已將此添加CSS：

#model1.open { 
max-height: 1000px; 
//transitions 
-webkit-transition: max-heigth 0.7s; 
-moz-transition: max-heigth 0.7s; 
transition: max-heigth 0.7s; 
}

，這給JavaScript

var content = document.getElementByClassName(".model1"); 
var button = document.getElementById("show-more") 

button.onclick = function(){ 

if(content.className == "open"){ 
    content.className = ""; 
    button.innerHTML = "Show More"; 

} else { 
    content.className = "open"; 
    button.innerHTML = "Show Less"; 
} 

};

但does'not工作。我被卡住了。有人可以幫我做這項工作嗎？

來源

2017-06-19 newb13.

你的代碼有一些bug。

在你的CSS，你是指model1作爲ID，但在你的JavaScript你稱其爲一類。
getElementByClassName應該是getElementsByClassName與Element之後的s。如果您在瀏覽器控制檯中查看，則會看到此問題。（ctrl + shift + i）。
您不包含.符號getElementsByClassName，所以您應該使用值modal1而不是.modal1。
如果你使用getElementsByClassName，你需要指定影響哪些該類的元素，否則與該類的所有元素將受到影響，這意味着點擊該按鈕會顯示更多和更少的所有模態的。我使用jQuery，所以我不確定純JS的替代方案是什麼，但是您可能想要檢測哪個.modal1與單擊按鈕具有共享父級，或者交替放置具有哪個數字按鈕的屬性，以及將相同的屬性放在模態上，並使用它將兩個元素的行爲聯繫在一起。

這可能不是錯誤的完整列表，但這些是最明顯的我明白了。

來源

2017-06-19 19:01:26 Goose

如果我只有一個元素，那麼它的工作原理。參見>https://jsfiddle.net/075tcezL/

But how do i make it show or hide all three elements at the same time when i 
click the button?

來源

2017-06-19 20:15:13

的onClick行動，以顯示更多的信息，HTML，CSS，JavaScript的

回答

相關問題