使用JS和CSS实现按钮下方可展开表单的技术方案咨询

一、结构优化 #

把按钮和对应表单放在同一容器内，避免通过data-modal-id关联，逻辑更清晰：

<div class="button-grid">
  <!-- 按钮组1 -->
  <div class="button-group">
    <button class="open-button">按钮1</button>
    <div class="form-container">
      <input type="text" placeholder="输入内容">
      <button type="submit">提交</button>
    </div>
  </div>
  <!-- 按钮组2 -->
  <div class="button-group">
    <button class="open-button">按钮2</button>
    <div class="form-container">
      <input type="text" placeholder="输入内容">
      <button type="submit">提交</button>
    </div>
  </div>
  <!-- 更多按钮组... -->
</div>

二、CSS布局（实现每行3个+表单隐藏/显示） #

用Grid布局轻松实现每行3个按钮，表单默认隐藏，激活时显示：

.button-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 每行3列 */
  gap: 1rem; /* 按钮组之间的间距 */
  padding: 1rem;
}

.button-group {
  display: flex;
  flex-direction: column; /* 按钮和表单垂直排列 */
}

.open-button {
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.form-container {
  margin-top: 0.5rem;
  display: none; /* 默认隐藏表单 */
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 4px;
}

.form-container.active {
  display: block; /* 激活时显示表单 */
}

/* 响应式适配：小屏幕改成每行1个 */
@media (max-width: 768px) {
  .button-grid {
    grid-template-columns: 1fr;
  }
}

三、JS逻辑优化 #

方案1：简洁jQuery版（兼容现有技术栈）

解决原代码逻辑绕、依赖data-modal-id的问题，直接操作对应表单：

$(document).ready(function() {
  // 点击按钮切换表单显示状态
  $(".open-button").on("click", function(e) {
    e.stopPropagation(); // 阻止冒泡，避免触发页面其他区域的关闭逻辑
    const $targetForm = $(this).next(".form-container");
    
    // 关闭其他已展开的表单
    $(".form-container.active").not($targetForm).removeClass("active");
    // 切换当前表单的显示/隐藏
    $targetForm.toggleClass("active");
  });

  // 点击页面非按钮/表单区域，关闭所有表单
  $(document).on("click", function(e) {
    if (!$(e.target).closest(".button-group").length) {
      $(".form-container.active").removeClass("active");
    }
  });
});

方案2：原生JS版（无依赖，性能更优）

如果不想用jQuery，直接用原生JS实现相同逻辑：

document.addEventListener('DOMContentLoaded', function() {
  const buttons = document.querySelectorAll('.open-button');
  const allFormContainers = document.querySelectorAll('.form-container');

  // 绑定按钮点击事件
  buttons.forEach(button => {
    button.addEventListener('click', function(e) {
      e.stopPropagation();
      const currentForm = this.nextElementSibling;

      // 关闭其他表单
      allFormContainers.forEach(form => {
        if (form !== currentForm) form.classList.remove('active');
      });
      // 切换当前表单状态
      currentForm.classList.toggle('active');
    });
  });

  // 点击页面其他区域关闭表单
  document.addEventListener('click', function(e) {
    const isInsideGroup = e.target.closest('.button-group');
    if (!isInsideGroup) {
      allFormContainers.forEach(form => form.classList.remove('active'));
    }
  });
});

优化点说明 #

1. 结构清晰：按钮和表单绑定在同一容器，无需额外data属性关联，降低维护成本
2. 布局稳定：用CSS Grid实现每行3个按钮，响应式适配简单
3. 逻辑直观：直接控制表单的显示/隐藏，替代原方案中通过按钮margin间接调整的方式
4. 交互友好：点击按钮时自动关闭其他表单，避免多个表单同时展开导致界面混乱
5. 性能更优：原生JS版本无外部依赖，执行效率更高

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