Javascript Readmore/readless内容切换功能
我试图实现的是一个java readmore/readless内容切换函数,当一个内容的onclick触发时,它会禁用其他内容。我正在使用getElementsByClassName、setTimeout和transition 我遇到的问题是显示:none没有响应setTimeout。javascript之外的任何建议都是受欢迎的 下面是Javascript:Javascript Readmore/readless内容切换功能,javascript,css,dom,settimeout,Javascript,Css,Dom,Settimeout,我试图实现的是一个java readmore/readless内容切换函数,当一个内容的onclick触发时,它会禁用其他内容。我正在使用getElementsByClassName、setTimeout和transition 我遇到的问题是显示:none没有响应setTimeout。javascript之外的任何建议都是受欢迎的 下面是Javascript: function toggle(cont, tog, id) { for (var i = 0; i < cont.len
function toggle(cont, tog, id) {
for (var i = 0; i < cont.length; i++) {
if (tog[id].innerHTML != "Click Here to Read Less!") {
/* Toggle On */
tog[id].innerHTML = "Click Here to Read Less!";
cont[id].style.height = "250px";
/* Disable other */
setTimeout(function () { cont[i].style.display = "none" }, 500);
setTimeout(function () { tog[i].style.display = "none" }, 500);
for (var x = 0; x < cont.length; x++) {
cont[x].style.opacity = "0";
tog[x].style.opacity = "0";
setTimeout(function () { cont[x].style.display = "none" }, 500);
setTimeout(function () { tog[x].style.display = "none" }, 500);
if (cont[id] == cont[x]) {
cont[id].style.opacity = "1";
tog[id].style.opacity = "1";
}
}
} else {
/* Toggle Off */
tog[id].innerHTML = "Click Here to Read More!";
cont[id].style.height = "100px";
/* Enable other */
for (var x = 0; x < cont.length; x++) {
cont[x].style.opacity = "1";
tog[x].style.opacity = "1";
cont[x].style.display = "block";
tog[x].style.display = "block";
}
}
}
}
stockoverflow.com是我最喜欢的获取股票照片和DOM answersCheckout这个答案的地方,它与:
<div class="content">
<p>
Content Here!
</p>
</div>
<a href="javascript:toggle(document.getElementsByClassName('content'), document.getElementsByClassName('readtoggle'), 0)" class="readtoggle">Click Here to Read More!</a>
<div class="content">
<p>
Content Here!
</p>
</div>
<a href="javascript:toggle(document.getElementsByClassName('content'), document.getElementsByClassName('readtoggle'), 1)" class="readtoggle">Click Here to Read More!</a>
<div class="content">
<p>
Content Here!
</p>
</div>
<a href="javascript:toggle(document.getElementsByClassName('content'), document.getElementsByClassName('readtoggle'), 2)" class="readtoggle">Click Here to Read More!</a>
/* Centering Content */
#wrapper {
margin: 0 auto;
height: auto;
width: 70%;
text-align: center;
font-family: Sans-Serif, Calibri;
}
/* Styling Content */
.content {
padding: 25px 50px;
margin: 0 auto;
height: 100px;
width: 500px;
display: block;
text-align: left;
overflow: hidden;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}