javascript - 如何使用slideToggle和响应式设计将水平链接保持在适当的位置？

我正在尝试使用响应式设计来制作产品徽标的网格，以使其适应屏幕宽度。对于徽标的每一行，我希望它们的信息都不同，但是当它们向下滑动以显示在相同位置时。



但是，当我尝试完成此操作时，它会在整个地方转移徽标。
这是我在JSFiddle.上尝试过的

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

最佳答案

我编辑了您的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>

这种结构对于您想做什么更有意义

关于javascript - 如何使用slideToggle和响应式设计将水平链接保持在适当的位置？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33416656/