我现在已经进行了一些设置，与我正在研究的设置很接近：https://codepen.io/gojiHime/pen/EGQNNJ
我想做的是，当单击任何块的“展开”时，我希望打开“抽屉”（带有红色边框），以便它填满整行下方的空间并推动向下一行，但永远不会超过页面内容的最大宽度，即1080px。
对于我正在处理的内容，内容通过遍历所有已连接数据的循环填充。我曾尝试为内容块分配一个单独的区域，为抽屉分配一个单独的区域，但是抽屉将始终在所有行下方打开，而不在当前行下方打开（如果这样）。
几年前，我做了类似的事情，但不记得这个例子了，现在也不存在了，但是有可能。
虽然这里是我设置的jQuery，但我认为这不是jQuery问题，而是CSS / HTML问题，但我可能是错的。
$("a").each(function() {
$(this).on("click", function(e) {
e.preventDefault();
let drawers = $(".drawer");
drawers.slideUp();
let drawer = $(this).parent().next().slideToggle();
});
});
如果有帮助，这是我正在研究的项目的刀片模板中的代码，可获取所需的信息：
@if(have_rows('product_info'))
@while( have_rows('product_info')) @php the_row() @endphp
@php
$productName = get_sub_field('product_name');
$productSublabel = get_sub_field('product_sublabel');
$productBlueTxt = get_sub_field('blue_label_text');
$productSummary = get_sub_field('product_summary');
$productImg = get_sub_field('product_thumbnail');
$productHashId = get_sub_field('product_hash');
$drawerProductName = get_sub_field('drawer_product_name');
$drawerProductDesc = get_sub_field('drawer_product_description');
$gallery = get_sub_field('drawer_gallery');
$styleHeader = get_sub_field('style_options_header');
$colorsHeader = get_sub_field('color_options_header');
$storesHeader = get_sub_field('availability_header');
@endphp
<div class="product-content">
<div class="product-block">
<div class="image-label-group">
<img class="product-photo" src="{{ $productImg }}" alt="product image"/>
@if($productBlueTxt)
<p class="prod-blue-label">{{ $productBlueTxt }}</p>
@endif
</div>
<div class="product-info-group">
<p class="product-label">{{ $productName }}</p>
@if($productSublabel)
<p class="prod-sublabel">{{ $productSublabel }}</p>
@endif
<div class="prod-summary">{!! $productSummary !!}</div>
<a class="explore-btn" href="#">Explore</a>
</div>
</div>
<div class="product-drawer">
<div class="product-drawer-inner">
<img class="close-drawer" src="@asset('images/Icon-CloseButton.svg')" alt="" />
@if($gallery)
<div class="gallery-container">
@foreach($gallery as $image)
<div class="gallery-item">
<a href="{{ $image['sizes']['large'] }}">
<img src="{{ $image['sizes']['thumbnail'] }}" alt=""/></a>
</div>
@endforeach
</div>
@endif
<div class="product-features">
<p id="drawer-prod-name">{{ $drawerProductName }}</p>
@if($styleHeader)
<div class="section-with-border">
<p id="style-header" class="drawer-option-headers">{{ $styleHeader }}</p>
@if(have_rows('style_options'))
@while( have_rows('style_options')) @php the_row() @endphp
@php
$styleThumb = get_sub_field('style_thumbnail');
@endphp
<img src="{{$styleThumb}}" class="option-thumbnail" alt=""/>
@endwhile
@endif
</div>
@endif
@if($colorsHeader)
<div class="section-with-border">
<p class="color-header drawer-option-headers">{{ $colorsHeader }}</p>
@if(have_rows('colors'))
@while( have_rows('colors')) @php the_row() @endphp
@php
$colorVal = get_sub_field('color_value');
$colorLbl = get_sub_field('color_label');
@endphp
<div class="color-option-container">
<div style="background-color: {!! $colorVal !!};" class="option-thumbnail"></div>
<p class="color-label">{{$colorLbl}}</p>
</div>
@endwhile
@endif
</div>
@endif
@if($storesHeader)
<div class="stores-container">
<p class="stores-header drawer-option-headers">{{ $storesHeader }}</p>
@if(have_rows('stores'))
@while( have_rows('stores')) @php the_row() @endphp
@php
$storeThumb = get_sub_field('store_thumbnail');
@endphp
<div class="store-thumb-container">
<img src="{{$storeThumb}}" class="option-thumbnail" alt="" />
</div>
@endwhile
@endif
</div>
@endif
<div class="section-with-border social-icons">
<p class="drawer-option-headers">Share this Product!</p>
<div class="icon-container">
<a href="#">
<i class="fab fa-facebook-f"></i>
</a>
</div>
<div class="icon-container">
<a href="#">
<i class="fab fa-twitter"></i>
</a>
</div>
<div class="icon-container">
<a href="#">
<i class="fab fa-pinterest"></i>
</a>
</div>
<div class="icon-container">
<a href="#">
<i class="fa fa-envelope"></i>
</a>
</div>
</div>
<div class="product-desc">
<input id="show-more" type="checkbox">
<label class="show-lbl" for="show-more"></label>
<div class="panel">
{!! $drawerProductDesc !!}
</div>
<div class="fade"></div>
</div>
</div>
</div>
</div>
</div>
@endwhile
@endif