在多行上切换内容

 admin  2023-05-26
Share: Twitter Facebook Pinterest Reddit VK Digg Linkedin Mix

我有多个框，在多行上，切换内容应该放在所有框下面，从同一行的点击框，在最左边，而不仅仅是点击框的下面。这就是我所拥有的：https://codepen.io/tonyart/pen/VwwBzbP

desired output

?

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

?

转载请注明出处:http://www.dlaisen.com/article/20230526/2255921.html