如何解决单击多个 div 时更改 div 高度
我正在尝试制作一个个人资料页面,每个页面上都有一个“多读少读”按钮,我需要它不仅适用于一个 div。我通过添加一个活动类来显示更多内容,从而在点击时增大 div 高度。目前它只能在一个 div 上工作,但我需要它在多个 div 上工作。非常感谢任何帮助。
<div class="Wrapper">
<h1>Who We Are</h1>
<div class="Profile">
<div class="Profile-img"><img src="Images/Pencil small.jpg"></div>
<div class="Name">Example name</div>
<span class="Intro"><p>This is my introduction hhgg hfhfh ghfhfh</p></span>
<button class="Read-more">Read more</button>
<div class="Content">
<p>uhfuihfehswf uhfushfuhfuhf fuhfuhsf</p>
<img src="Images/Pencil small.jpg">
</div>
</div>
<style>
@media screen and (max-width:400px){
.Wrapper{position: relative;width:100%;height:1000px;max-width: 600px;margin: auto;background: whitesmoke;overflow: hidden;}
h1{display: flex;justify-content:center;margin-top: 10px;font-size: 25px;}
.Profile{width: 100%;height:150px;border: 1px solid black;position:absolute;top:60px;display: flex;align-items: center;}
.Profile-img{width:100px;height:100px;float: left;border-radius: 50%;border: 1px solid black;position: absolute;left:10px;top:25px}
.Profile-img img{width: 100px;height: 100px;border-radius: 50%;object-fit: cover;}
.Name{position:absolute;left:125px;bottom:30px;font-size: 20px;white-space: nowrap;top:20px}
.Intro{position: relative;top:20px;right:100px;position: absolute;left:125px;width: 70%;top:60px}
.Intro p{width:200px;max-width: 80%;}
.Read-more{width:125px;height:35px;position:absolute;left:50%;transform: translateX(-50%);bottom:-17px}
.Profile.Active{height:500px}
.Content{display:none;position: relative;bottom:70px;margin-left: 10px;font-size: 16px;}
.Content img{width:100px;height:100px}
.Content.Active{display: block;}
}
</style>
<script>
const btn = document.querySelector('.Read-more');
const profile = document.querySelector('.Profile');
const content = document.querySelector('.Content');
var currentText = btn.innerText;
btn.addEventListener('click',function() {
profile.classList.toggle('Active');
})
btn.addEventListener('click',function () {
content.classList.toggle('Active');
})
btn.addEventListener('click',function() {
if(this.innerText === currentText){
btn.innerText = 'Read less';
} else {
btn.innerText = currentText;
}
},false);
</script>
解决方法
使用 jQuery 进行扩展:
$('.your-divs-class').each(function () {
content.classList.toggle('Active');
});
您也可以考虑使用 hide() 和 show() 方法而不是 active。那些将使用 display: block
和 display: none
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。