Question

我有一个导航，您可以通过它导航div框：

<ul>
   <li><a href="javascript:void(0);" data-target="apples">Appels</a></li>
   <li><a href="javascript:void(0);" data-target="bananas">Bananas</a></li>
   <li><a href="javascript:void(0);" data-target="pineapples">Pineapples</a></li>
</ul>

<div class="fruits bananas apples pineapples"></div>  
<div class="fruits bananas"></div>
<div class="fruits pineapples apples"></div>

我的目标：当你点击水果时，那些不包含课程中水果的div盒子会隐藏 - 但是：它们不仅要隐藏，还要为即将到来的div盒子提供空间。这是我到目前为止提出的jQuery函数：

    jQuery(document).ready(function() {

        jQuery('a[data-target]').click(function() {
              jQuery('.fruits').show().not('.' + this.dataset.target).hide();
        });

    });

我还有两个问题：

在前端，我有五行，每行包含三个div.fruits框。每个div的宽度为33％。上面的函数实现了不需要的div框隐藏，但是如果例如唯一被隐藏的框是行＃1中的最后一个框，则第2行的第一个框不会自动向上移动到隐藏的位置盒子是 - 相反，隐藏的盒子留下了白色空间。
我的第二个要求：假设您已点击苹果链接以过滤所有“苹果”框 - 如果之后您决定点击“菠萝”链接，那么当然所有div框都可能在需要考虑使用apple-click进行新的过滤查询后，隐藏了这些内容。

我将非常感谢你的代码建议！

这是我的小提琴：http://jsfiddle.net/Karicula/LXmjp/#&togetherjs=UImBqeN3DU 点击“苹果”查看我的问题...

Answer 1

你的问题依赖于这种风格

.fruits:nth-child(3n) {
    margin-right:0;
}

删除此内容并将您的.fruits班级margin-right更改为0.3%

隐藏div盒并删除空间

1 个答案: