jquery - jQuery slideToggle 移动所有引导列

Question

现在所有的列都在移动，但我希望它只有被点击的那一个应该向下滑动。

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

$(".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/

标签： jqueryhtmltwitter-bootstrap-3slidetoggle

Answer 1

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

根据MDN 网络文档，

自启动

将要与对齐容器的边缘对齐的项目对齐，该边缘对应于项目在交叉轴上的起始侧。

$(".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>