Question

我的目标是实现实时结果过滤。我有三个过滤器合身，不合身和预定。如果点击合适，它应该只显示类good_fit_panel的面板。考虑我有5个小组。

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-4">
<div class = "panel good_fit_panel">
</div>
</div>

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-4">
<div class = "panel bad_fit_panel">
</div>
</div>

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-4">
<div class = "panel good_fit_panel">
</div>
</div>

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-4">
<div class = "panel bad_fit_panel">
</div>
</div>

这些是我的过滤器链接。

<li><a href="javascript:;" onclick = "javascript:filterGoodFit()"><B>GOOD FIT</B></a></li>                                                                
<li><a href="javascript:;" onclick = "javascript:filterBadFit()"><B>BAD FIT</B></a></li>

我的过滤功能

<script>
    function filterGoodFit(){
       $(".good_fit_panel").show();
       $(".bad_fit_panel").fadeOut(500);
        }

    function filterBadFit(){
       $(".good_fit_panel").fadeOut(500);
       $(".bad_fit_panel").show();
        }
</script>

这就是我想要的，它隐藏了除搜索查询之外的其他面板。但这里的问题是。它隐藏并留下空旷的空间。因为我是JS的新手，所以我不知道如何解决这个问题并重新安排它们。

Answer 1

正如@pistou在评论中所指出的那样，你应该真正显示和隐藏面板div的父div，因为它们决定了所占用的空间量。因此，全部替换：

.show();
.fadeOut();

分别：

.parent().show();
.parent().fadeOut();

Answer 2

也许你需要slideUp(), slideDown(), slideToggle()

用jquery隐藏其他div之后如何安排div？

2 个答案: