jQuery slideToggle 移动所有 bootstrap 列

Question

现在所有的列都在移动，但我想要它，以便只有被点击的列应该向下滑动。

我已经尝试了一些我在 Whosebug 上找到的解决方案，但其中 none 有效。我认为是因为水平滚动，但我不确定。

$(".col-sm-2").click(function() {
  $(this).find(".col-sm-12").slideToggle();
});

.row {
  overflow-x: auto;
  white-space: nowrap;
}

.row>.col-sm-2 {
  display: inline-block;
  float: none;
}


/* Decorations */

.col-sm-2 {
    color: #fff;
    font-size: 48px;
    padding-bottom: 20px;
    padding-top: 18px;
}

.col-sm-2:nth-child(3n+1) {
  background: #c69;
}

.col-sm-2:nth-child(3n+2) {
  background: #9c6;
}

.col-sm-2:nth-child(3n+3) {
  background: #69c;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <div class="row">
      <div class="col-sm-2">
        <div class="col-sm-12" style="display: none">
          <p>1</p>
        </div>
      </div>
      <div class="col-sm-2">
        <div class="col-sm-12" style="display: none">
          <p>2</p>
        </div>
      </div>
      <div class="col-sm-2">
        <div class="col-sm-12" style="display: none">
          <p>3</p>
        </div>
      </div>
      <div class="col-sm-2">
        <div class="col-sm-12" style="display: none">
          <p>4</p>
        </div>
      </div>
      <div class="col-sm-2">
        <div class="col-sm-12" style="display: none">
          <p>5</p>
        </div>
      </div>
      <div class="col-sm-2">
        <div class="col-sm-12" style="display: none">
          <p>6</p>
        </div>
      </div>
      <div class="col-sm-2">
        <div class="col-sm-12" style="display: none">
          <p>7</p>
        </div>
      </div>
    </div>

这是我的 jsfiddle：http://jsfiddle.net/xpvt214o/502168/

Answer 1

在这种情况下，我建议您对父元素使用 dispay: flex;，对每个子元素使用 align-self: flex-start;。

根据 MDN web docs、

self-start

Aligns the items to be flush with the edge of the alignment container corresponding to the item's start side in the cross axis.

$(".col-sm-2").click(function() {
  $(this).find(".col-sm-12").slideToggle();
});

.row {
  overflow-x: auto;
  white-space: nowrap;
  display: flex;
}

.row>.col-sm-2 {
  display: inline-block;
  float: none;
}

.col-sm-2 {
  color: #fff;
  font-size: 48px;
  padding-bottom: 20px;
  padding-top: 18px;
  align-self: flex-start;
}

.col-sm-2:nth-child(3n+1) {
  background: #c69;
}

.col-sm-2:nth-child(3n+2) {
  background: #9c6;
}

.col-sm-2:nth-child(3n+3) {
  background: #69c;
}

<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"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css"/>

<div class="row">
  <div class="col-sm-2">
    <div class="col-sm-12" style="display: none">
      <p>1</p>
    </div>
  </div>
  <div class="col-sm-2">
    <div class="col-sm-12" style="display: none">
      <p>2</p>
    </div>
  </div>
  <div class="col-sm-2">
    <div class="col-sm-12" style="display: none">
      <p>3</p>
    </div>
  </div>
  <div class="col-sm-2">
    <div class="col-sm-12" style="display: none">
      <p>4</p>
    </div>
  </div>
  <div class="col-sm-2">
    <div class="col-sm-12" style="display: none">
      <p>5</p>
    </div>
  </div>
  <div class="col-sm-2">
    <div class="col-sm-12" style="display: none">
      <p>6</p>
    </div>
  </div>
  <div class="col-sm-2">
    <div class="col-sm-12" style="display: none">
      <p>7</p>
    </div>
  </div>
</div>

Answer 2

$(".col-s m-2").click(function() {$(this).children().slideToggle(); })

jQuery slideToggle 移动所有 bootstrap 列

jQuery slideToggle moves all bootstrap columns

html

jquery

slidetoggle

twitter-bootstrap-3