要实现手风琴样式的显示/隐藏功能,可以通过以下步骤来获取隐藏div的高度:
<div class="accordion">
<div class="accordion-item">
<div class="accordion-title">标题1</div>
<div class="accordion-content">内容1</div>
</div>
<div class="accordion-item">
<div class="accordion-title">标题2</div>
<div class="accordion-content">内容2</div>
</div>
...
</div>
.accordion-content {
display: none;
}
var accordion = document.querySelector('.accordion');
accordion.addEventListener('click', function(event) {
var target = event.target;
if (target.classList.contains('accordion-title')) {
var content = target.nextElementSibling;
content.style.display = (content.style.display === 'none') ? 'block' : 'none';
}
});
offsetHeight
属性来获取元素的高度。例如:var content = document.querySelector('.accordion-content');
var height = content.offsetHeight;
console.log('隐藏div的高度为:' + height + 'px');
这样就可以获取到隐藏div的高度了。
对于手风琴样式的显示/隐藏功能,可以应用于诸如展开/收起菜单、折叠/展开内容等场景。
腾讯云相关产品和产品介绍链接地址方面,由于要求不能提及具体的云计算品牌商,无法提供相关链接。但腾讯云提供了丰富的云计算服务,包括云服务器、云数据库、云存储等,可以根据具体需求选择适合的产品。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云