显示折叠面板并编辑其他面板类

Question

我想显示带有按钮的折叠面板，然后编辑其他面板的类，使其适合页面宽度。这是我的代码

按钮

// first try
$('#signup').on('click', function() {
  $('#table').removeClass('col-md-12').addClass('col-md-8');
});
// second try
$('#signup').on('click', function() {
  $('#table').toggleClass('col-md-12 col-md-8');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-success" data-toggle="collapse" data-target="#panel" id="signup">Signup</button>

<div class="form-row">
  <!-- panel 1 -->
  <div class="form-group col-md-4 collapse" id="panel">
    // stuff here
  </div>

  <!-- panel 2 -->
  <div class="form-group col-md-12 ml-auto" id="table">
    // stuff here
  </div>
</div>

当我点击按钮时，我希望面板 1 出现，然后面板 2 类 col-md-12 更改为 col-md-8，这样它就可以适应引导网格系统。我尝试了 onclick 触发器，但它不起作用。

Answer 1

$('#panel').on('hidden.bs.collapse', function(e) {
  $('#table').toggleClass('col-xs-12').toggleClass('col-xs-8');
}).on('show.bs.collapse', function(e) {
  $('#table').toggleClass('col-xs-8').toggleClass('col-xs-12');
})

.form-row.row {
  margin-right: 0px;
  margin-left: 0px;
}

<header>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</header>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<button class="btn btn-success" data-toggle="collapse" data-target="#panel" id="signup">Signup</button>

<div class="form-row row">
  <!-- panel 1 -->
  <div class="form-group col-xs-4 collapse" id="panel">
    // stuff here  Panel 1
  </div>

  <!-- panel 2 -->
  <div class="form-group col-xs-12 ml-auto" id="table">
    // stuff here  Panel 2
  </div>
</div>

编辑

更新的 sn-p 不使用 Bootstrap 网格系统。

$('#panel').on('hidden.bs.collapse', function(e) {
  $('#table').toggleClass('col-xs-12');
}).on('show.bs.collapse', function(e) {
  $('#table').toggleClass('col-xs-12');
})

.some-sontainer {
  margin-right: 0px;
  margin-left: 0px;
  display: flex;
}

.some-sontainer .col1{
  width: 200px;
}

.some-sontainer .col2{
  width: 100%;
}

#table{
  background-color: red;
}

#panel{
  background-color: green;
}

<header>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</header>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<button class="btn btn-success" data-toggle="collapse" data-target="#panel" id="signup">Signup</button>

<div class="form-row some-sontainer">
  <!-- panel 1 -->
  <div class="form-group col1 collapse" id="panel">
    // stuff here  Panel 1
  </div>

  <!-- panel 2 -->
  <div class="form-group col2 col-xs-12 ml-auto" id="table">
    // stuff here  Panel 2
  </div>
</div>

Answer 2

我尝试结合方法，终于成功了。

$('#panel').on('hidden.bs.collapse', function(){
    $('#table').removeClass('col-md-8').addClass('col-md-12');
});
$('#signup').on('click', function(){
    $('#table').removeClass('col-md-12').addClass('col-md-8');
});