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

Question

我想用按钮显示折叠面板然后编辑其他面板的类，以便它可以适合页面宽度。这是我的代码

按钮

＆＃13;

＆＃13;

// 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');
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

当我单击按钮时，我希望面板1显示，然后面板2类col-md-12更改为col-md-8，因此它可以适合自举网格系统。我尝试点击触发器，但它不起作用。

Answer 1

＆＃13;

＆＃13;

$('#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');
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

修改

不使用Bootstrap网格系统的更新代码段。

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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');
});