如何在JavaScript和jQuery中实现toggle功能简化表单显隐代码？

核心优化点 #

• 用jQuery内置的slideToggle()方法直接替代单独的slideUp()/slideDown()，自动处理元素显隐切换
• 用toggleClass()方法一次性切换两个图标类，无需手动判断当前类状态做增删
• 仅需绑定一次事件处理逻辑，代码量减少50%，维护更方便

优化后完整代码 #

$(document).on('click', '.bi-arrows-angle-contract, .bi-arrows-angle-expand', function() {
    // 自动切换表单显隐动画
    $('#fupForm').slideToggle();
    // 自动切换两个图标类的存在状态
    $(this).toggleClass('bi-arrows-angle-contract bi-arrows-angle-expand');
});

低耦合改进写法（可选） #

如果后续有修改图标类名的可能，建议给触发图标新增独立的业务类作为事件绑定选择器，和样式类解耦，避免样式调整导致功能失效：

<!-- 图标HTML示例 -->
<i class="bi bi-arrows-angle-contract js-form-toggle"></i>

对应JS逻辑更稳定：

$(document).on('click', '.js-form-toggle', function() {
    $('#fupForm').slideToggle();
    $(this).toggleClass('bi-arrows-angle-contract bi-arrows-angle-expand');
});

内容的提问来源于stack exchange，提问作者kreatusJohn