javascript - 隐藏 div 框并删除空间

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 行的第一个框不会自动向上移动到隐藏的位置盒子是 - 相反，隐藏的盒子留下了空白。

• 我的第二个要求:假设您点击了 apple 链接以过滤所有“apples”框 - 如果之后您决定点击“pineapples”链接而不是所有可能的 div 框apple-click 后已被隐藏，需要考虑新的过滤器查询。

对于您的代码建议，我将不胜感激!

我的 fiddle 来了:http://jsfiddle.net/Karicula/LXmjp/#&togetherjs=UImBqeN3DU 点击“苹果”查看我的问题...

Answer 1

你的问题依赖于这种风格

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

删除它并将您的 .fruits 类 margin-right 属性更改为 0.3%