点击按钮显示折叠面板并修改面板类适配页面宽度问题

看起来你遇到的问题是点击按钮时，既想展开折叠的panel1，又想调整panel2的栅格列类，但两种jQuery写法都没生效。我来帮你分析原因并给出解决方案：

问题根源分析 #

你的代码里有两个可能导致失效的关键点：

• DOM加载顺序问题：你把jQuery代码放在了HTML元素（按钮和div）之前，这时候浏览器还没渲染出这些元素，$('#signup')找不到目标元素，自然绑定不了点击事件。
• Bootstrap Collapse的事件优先级：按钮用了Bootstrap的data-toggle="collapse"属性，插件会先处理这个点击事件，可能导致你的自定义事件逻辑执行异常。

解决方案 #

方案1：确保代码在DOM加载完成后执行 #

把你的jQuery代码包裹在$(document).ready()中，或者将<script>标签移到HTML内容的末尾（</body>之前），这样能保证元素已经被渲染后再绑定事件：

$(document).ready(function() {
  $('#signup').on('click', function() {
    // 根据panel1的展开状态切换panel2的类
    if ($('#panel').hasClass('show')) {
      $('#table').removeClass('col-md-12').addClass('col-md-8');
    } else {
      $('#table').removeClass('col-md-8').addClass('col-md-12');
    }
  });
});

方案2：监听Bootstrap Collapse的原生事件（更推荐） #

Bootstrap的Collapse组件提供了专门的事件，比如show.bs.collapse（面板开始展开时）和hide.bs.collapse（面板开始收起时），监听这些事件能更精准地同步panel2的类变化，避免和按钮点击事件冲突：

$(document).ready(function() {
  // 当panel1开始展开时，修改panel2的类
  $('#panel').on('show.bs.collapse', function() {
    $('#table').removeClass('col-md-12').addClass('col-md-8');
  });
  
  // 当panel1开始收起时，恢复panel2的类
  $('#panel').on('hide.bs.collapse', function() {
    $('#table').removeClass('col-md-8').addClass('col-md-12');
  });
});

完整可运行示例代码 #

这里给你整合好的完整代码，确保所有资源和逻辑都正确：

<!DOCTYPE html>
<html>
<head>
  <!-- 引入Bootstrap CSS，确保折叠组件样式正常 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
</head>
<body>
  <button class="btn btn-success" data-toggle="collapse" data-target="#panel" id="signup">Signup</button>
  <div class="form-row mt-3">
    <!-- panel 1 -->
    <div class="form-group col-md-4 collapse" id="panel">
      <div class="p-3 bg-light border">Panel 1 Content</div>
    </div>
    <!-- panel 2 -->
    <div class="form-group col-md-12 ml-auto" id="table">
      <div class="p-3 bg-light border">Panel 2 Content</div>
    </div>
  </div>

  <!-- 先引入jQuery，再引入Bootstrap JS，保证依赖顺序正确 -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <!-- 自定义脚本放在最后，确保DOM已加载 -->
  <script>
    $(document).ready(function() {
      $('#panel').on('show.bs.collapse', function() {
        $('#table').removeClass('col-md-12').addClass('col-md-8');
      });
      
      $('#panel').on('hide.bs.collapse', function() {
        $('#table').removeClass('col-md-8').addClass('col-md-12');
      });
    });
  </script>
</body>
</html>

额外提示 #

• 务必引入Bootstrap的CSS和JS文件，否则Collapse组件无法正常工作。
• 保留ml-auto类可以让panel2在panel1展开时自动右对齐，更好地适配Bootstrap栅格布局。

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