要简化这个JavaScript函数,可以使用事件委托和数据属性来减少代码量和重复代码。以下是一个简化的示例:
HTML部分:
<button class="toggle-btn" data-target="content-1">按钮1</button>
<button class="toggle-btn" data-target="content-2">按钮2</button>
<!-- 其他按钮... -->
<div id="content-1" class="content">内容1</div>
<div id="content-2" class="content">内容2</div>
<!-- 其他内容区域... -->
JavaScript部分:
document.addEventListener('click', function(event) {
if (event.target.classList.contains('toggle-btn')) {
var targetId = event.target.dataset.target;
var targetContent = document.getElementById(targetId);
if (targetContent) {
targetContent.classList.toggle('show');
}
}
});
CSS部分:
.content {
display: none;
}
.content.show {
display: block;
}
这个简化的函数利用了事件委托,将点击事件绑定在document上,通过判断点击的元素是否具有toggle-btn
类来确定是否是按钮。然后,通过data-target
属性获取目标内容区域的ID,并使用getElementById
方法获取目标内容区域的元素。最后,使用classList.toggle
方法在内容区域的元素上切换show
类,从而实现显示/隐藏的效果。
这种简化的方法可以适用于任意数量的按钮和内容区域,避免了为每个按钮编写独立的事件处理函数,提高了代码的可维护性和可扩展性。
推荐的腾讯云相关产品:无特定推荐产品。
领取专属 10元无门槛券
手把手带您无忧上云