Bootstrap 4卡片嵌套选项页面加载时默认展开首个内容的方法

我懂你遇到的坑了——明明给选项加了active/inactive类，单选按钮也高亮了，可对应内容就是不显示，还得搞明白页面加载时怎么让第一个选项的内容默认展开对吧？

其实问题出在三个关键点没对齐：单选按钮的选中状态、内容区域的显示状态，还有父元素的active样式类。我给你拆解下解决方案：

核心修复步骤 #

1. 给首个单选按钮加checked属性：页面加载时让它默认被选中，这是触发后续逻辑的基础；
2. 给对应内容区域加显示类：Bootstrap 4里用show（如果是collapse组件）或者移除d-none（自定义隐藏），确保内容默认可见；
3. 给首个选项的父容器加active类：保证样式和选中状态匹配，让用户一眼看到哪个选项是激活的。

完整示例代码 #

<div class="card">
  <div class="card-header">
    <h5 class="mb-0">
      <button class="btn btn-link" data-toggle="collapse" data-target="#optionsContainer" aria-expanded="true">
        选项组
      </button>
    </h5>
  </div>
  <div id="optionsContainer" class="collapse show">
    <div class="card-body">
      <!-- 第一个主选项（默认激活） -->
      <div class="form-check active">
        <input class="form-check-input" type="radio" name="mainOption" id="option1" checked>
        <label class="form-check-label" for="option1">主选项1</label>
        
        <!-- 子选项区域（默认显示） -->
        <div class="mt-2" id="option1Content">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="subOption1" id="sub1-1">
            <label class="form-check-label" for="sub1-1">子选项1-1</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="subOption1" id="sub1-2">
            <label class="form-check-label" for="sub1-2">子选项1-2</label>
          </div>
        </div>
      </div>

      <!-- 第二个主选项 -->
      <div class="form-check mt-3">
        <input class="form-check-input" type="radio" name="mainOption" id="option2">
        <label class="form-check-label" for="option2">主选项2</label>
        
        <!-- 子选项区域（默认隐藏） -->
        <div class="mt-2 d-none" id="option2Content">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="subOption2" id="sub2-1">
            <label class="form-check-label" for="sub2-1">子选项2-1</label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="subOption2" id="sub2-2">
            <label class="form-check-label" for="sub2-2">子选项2-2</label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
// 主选项切换逻辑
$('input[name="mainOption"]').on('change', function() {
  // 移除所有主选项的active样式
  $('.form-check').removeClass('active');
  // 给当前选中的选项父容器加active
  $(this).closest('.form-check').addClass('active');
  // 隐藏所有子选项内容
  $('[id$="Content"]').addClass('d-none');
  // 显示当前选中选项的子内容
  $('#' + this.id + 'Content').removeClass('d-none');
});
</script>

关键细节说明 #

• 如果你的内容是用Bootstrap的collapse组件实现的，记得给默认显示的内容区域加collapse show类，而不是d-none/移除d-none；
• JS逻辑里的closest('.form-check')是为了精准找到选项的父容器，避免影响其他元素；
• 单选按钮的name属性要保证同组一致，这样才能实现单选互斥。

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