jQuery toggle在bootstrap容器包中扩展div

Question

伙计们基本上会有一个引导容器div，里面会有4个卡片样式div，带有切换展开/缩进按钮。当您单击一张卡片的按钮时，div将一直扩展到容器的宽度。请检查图像。我是jQuery的新手，我用脚本，我无法达到全宽。如果有人可以帮助我，那就太好了。这是下面的代码 -

$(document).ready(function() {
  $('#toggle-button').click(function() {
    var toggleWidth = $("#exp_card_1").width() == 600 ? "200px" : "600px";
    $('#exp_card_1').animate({
      width: toggleWidth
    });
  });
});

#exp_card_1 {
  position: relative;
  height: 310px;
  background: #2d3644;
  z-index: 1;
}
#toggle-button {
  position: absolute;
  right: 0;
  top: 43.7%;
  height: 38px;
  width: 38px;
  background: #131f34 url("../images/arrow.png") no-repeat;
  background-position: 5px 9px;
  border-radius: 3px 0 0 3px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="container" style="padding:0; position:relative;">
  <!-- /.row -->
  <div class="row mar-t25">
    <div class="col-xs-12 col-sm-3">
      <div id="exp_card_1">
        <div id="toggle-button"></div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-3">
      <div class="stock-card curves2">

      </div>
    </div>
    <div class="col-xs-12 col-sm-3">
      <div id="exp_card_3" class="stock-card curves2">

      </div>
    </div>
    <div class="col-xs-12 col-sm-3">
      <div id="exp_card_4" class="stock-card curves2">

      </div>
    </div>
  </div>
  <!-- /.row -->
</div>

Answer 1

这是你要找的吗？

我建议您查看MDN以获得有关CSS道具的更深入见解：https://developer.mozilla.org/en-US/docs/Web/CSS/width

$(document).ready(function() {
  $('#toggle-button').click(function() {
    var toggleWidth = $("#exp_card_1").width() > 0 ? "0%" : "100%";
    $('#exp_card_1').animate({
      width: toggleWidth
    });
  });
});

#exp_card_1 {
  position: relative;
  height: 310px;
  background: #2d3644;
  z-index: 1;
}
#toggle-button {
  position: absolute;
  right: 0;
  top: 43.7%;
  height: 38px;
  width: 38px;
  background: #131f34 url("../images/arrow.png") no-repeat;
  background-position: 5px 9px;
  border-radius: 3px 0 0 3px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="container" style="padding:0; position:relative;">
  <!-- /.row -->
  <div class="row mar-t25">
    <div class="col-xs-12 col-sm-3">
      <div id="exp_card_1">
        <div id="toggle-button"></div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-3">
      <div class="stock-card curves2">

      </div>
    </div>
    <div class="col-xs-12 col-sm-3">
      <div id="exp_card_3" class="stock-card curves2">

      </div>
    </div>
    <div class="col-xs-12 col-sm-3">
      <div id="exp_card_4" class="stock-card curves2">

      </div>
    </div>
  </div>
  <!-- /.row -->
</div>