jQuery双按钮控制表单显示隐藏切换及Bootstrap4兼容问题

我来帮你搞定这个表单交互的需求！结合你的描述，核心需求是两个表单互斥切换+单个表单的显隐切换，同时要兼容Bootstrap4，不会和它的内置脚本冲突。下面是完整的实现方案：

步骤1：HTML结构（兼容Bootstrap4） #

首先我们用Bootstrap4的原生类来构建按钮和表单，初始状态下两个表单都用d-none类隐藏：

<!-- 控制按钮 -->
<button id="btn-form1" class="btn btn-primary mr-2">切换表单1</button>
<button id="btn-form2" class="btn btn-secondary">切换表单2</button>

<!-- 表单区域 -->
<form id="form1" class="mt-3 d-none">
  <div class="form-group">
    <label>表单1输入框</label>
    <input type="text" class="form-control" placeholder="输入内容">
  </div>
  <button type="submit" class="btn btn-primary">提交表单1</button>
</form>

<form id="form2" class="mt-3 d-none">
  <div class="form-group">
    <label>表单2输入框</label>
    <input type="text" class="form-control" placeholder="输入内容">
  </div>
  <button type="submit" class="btn btn-secondary">提交表单2</button>
</form>

步骤2：jQuery实现逻辑 #

这段代码会处理两种核心场景：

• 点击按钮时，如果对应表单处于隐藏状态：先隐藏另一个表单，再显示当前表单
• 如果对应表单已经显示：直接隐藏它

$(document).ready(function() {
  // 表单1控制逻辑
  $('#btn-form1').click(function() {
    const $form1 = $('#form1');
    const $form2 = $('#form2');
    
    if ($form1.hasClass('d-none')) {
      // 表单1隐藏时：关闭表单2，打开表单1
      $form2.addClass('d-none');
      $form1.removeClass('d-none');
    } else {
      // 表单1显示时：直接关闭它
      $form1.addClass('d-none');
    }
  });

  // 表单2控制逻辑
  $('#btn-form2').click(function() {
    const $form1 = $('#form1');
    const $form2 = $('#form2');
    
    if ($form2.hasClass('d-none')) {
      // 表单2隐藏时：关闭表单1，打开表单2
      $form1.addClass('d-none');
      $form2.removeClass('d-none');
    } else {
      // 表单2显示时：直接关闭它
      $form2.addClass('d-none');
    }
  });
});

为什么这个方案能解决你的问题？ #

1. 兼容Bootstrap4：我们用的是Bootstrap4原生的d-none类来控制显隐，不会和Bootstrap的内置脚本（比如模态框、collapse组件）产生冲突
2. 满足所有需求：
   • 初始状态两个表单都隐藏
   • 点击按钮1：切换表单1的显隐，同时确保表单2隐藏
   • 点击按钮2：切换表单2的显隐，同时确保表单1隐藏
   • 点击已显示表单对应的按钮，可以直接关闭该表单
3. 逻辑清晰：通过判断表单当前的d-none类状态，来执行不同的操作，避免了之前代码只处理“切换到另一个表单”而忽略“关闭当前表单”的问题

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