如何使用slideToggle和響應式設計將水平鏈接保持在適當的位置？

Question

我正在嘗試使用響應式設計來制作產品徽標的網格，以使其適應屏幕寬度。 對於徽標的每一行，我希望它們的信息都不同，但是當它們向下滑動以顯示在相同位置時。

但是，當我嘗試完成此操作時，它會在各處移動徽標。 這是我在JSFiddle上嘗試過的。

$(document).ready(function () {
var clicked = true;
$('.one').on('click', function () {
    $(this).next('.two').slideToggle();
});

Answer 1

我編輯了您的html和jquery

https://jsfiddle.net/5sw59e66/11/

<div class="products-container">
    <div class="one" data-id="p1">Click me</div>
    <div class="one" data-id="p2">Click me</div>
    <div class="one" data-id="p3">Click me</div>
    <div class="one" data-id="p4">Click me</div>
</div>  
<div class="products-description-container">
    <h3 class="two" id="p1">First product description</h3>
    <h3 class="two" id="p2">Second product description</h3>
    <h3 class="two" id="p3">Third product description</h3>
    <h3 class="two" id="p4">Fourth product description</h3>
</div>

這種結構對於您想做什么更有意義