javascript - 在切换时显示/隐藏子 div

Question

当内容显示在第二个盒子上时，放在盒子下面，在盒子容器中，我希望它被移动到最左边，在两个盒子下面，如果我有多个盒子，在多行上，内容应该放在在与单击框同一行的所有框下方，这是我到目前为止所拥有的：

$('.show').click(function() {
  $(this).parent().parent().find('.content').slideToggle();
  $(this).parent().parent().siblings().find('.content').slideUp('fast');
});

.site-container {
  max-width: 1200px;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 200px;
  height: 100px;
  border: 2px solid red;
  margin: 0 50px 20px 0;
}

.box-container {
  width: 250px;
}

.content {
  width: 1200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="site-container">
  <div class="container">
    <div class="box-container">
      <div class="box">
        <button class="show">show</button>
      </div>
      <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    </div>
    <div class="box-container">
      <div class="box">
        <button class="show">show</button>
      </div>
      <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    </div>
  </div>
</div>

https://codepen.io/tonyart/pen/VwwBzbP

标签： javascriptjqueryhtmlcss

Answer 1

尝试这个

$('.show').click(function(){
  $(this).parent().parent().find('.content').slideToggle();
  $(this).parent().parent().siblings().find('.content').slideUp('fast');  });

.site-container {
  max-width:1200px;
}
.container {
  display:flex;
  flex-wrap:wrap;
  position:relative;
}
.box {
  width:auto;
  height:100px;
  border:2px solid red;
  margin:0 50px 20px 0;
}
.box-container {
  width:20%;
}
.content {
  width:1200px;
  position: absolute;
  left: 10px;
bottom: -10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="site-container">
  <div class="container">
    <div class="box-container">
      <div class="box">
        <button class="show">show</button>
      </div>
      <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    </div>
    <div class="box-container">
      <div class="box">
        <button class="show">show</button>
      </div>
      <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    </div>
    <div class="box-container">
      <div class="box">
        <button class="show">show</button>
      </div>
      <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    </div>
    <div class="box-container">
      <div class="box">
        <button class="show">show</button>
      </div>
      <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    </div>
    <div class="box-container">
      <div class="box">
        <button class="show">show</button>
      </div>
      <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    </div>
        <div class="box-container">
      <div class="box">
        <button class="show">show</button>
      </div>
      <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    </div>
    <div class="box-container">
      <div class="box">
        <button class="show">show</button>
      </div>
      <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    </div>
    <div class="box-container">
      <div class="box">
        <button class="show">show</button>
      </div>
      <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    </div>
    <div class="box-container">
      <div class="box">
        <button class="show">show</button>
      </div>
      <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    </div>
    <div class="box-container">
      <div class="box">
        <button class="show">show</button>
      </div>
      <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    </div>
    <div class="box-container">
      <div class="box">
        <button class="show">show</button>
      </div>
      <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    </div>
  </div>
</div>