隐藏 div 框和删除空间答案

【问题标题】：Hiding div boxes and removing space隐藏 div 框和删除空间
【发布时间】：2014-05-17 17:13:18
【问题描述】：

我有一个导航，您可以通过它过滤 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 行的第一个框不会自动向上移动到隐藏的位置box was - 相反，隐藏的盒子留下了空白。
我的第二个要求：假设您点击了苹果链接以过滤所有“苹果”框 - 如果之后您决定点击“菠萝”链接而不是所有可能的 div 框新过滤器查询需要考虑苹果点击后已隐藏。

非常感谢您的代码建议！

我的小提琴来了：http://jsfiddle.net/Karicula/LXmjp/#&togetherjs=UImBqeN3DU 点击“Apples”查看我的问题...

【问题讨论】：

也分享你的 CSS... 或者你最好创建一个小提琴并分享链接！
我们是否应该在脑海中想象这一切并提出解决方案？
@tilwinjoy 我正在研究小提琴。我是小提琴新手：如何保存我的小提琴？我生成的链接不起作用，例如，当我在不同的浏览器中打开它时，我的代码没有显示
@sunny 好的，我的小提琴来了：jsfiddle.net/Karicula/LXmjp/#&togetherjs=UImBqeN3DU
@tilwinJoy 在小提琴中，点击“Apples”查看我的问题

标签： javascript jquery css

【解决方案1】：

你的问题依赖于这种风格

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

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

【讨论】：