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：https://docs.helm.sh/helm/

Answer 1

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

根据MDN web docs，

  

自启动

     

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

$(".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（）; }）