我有一个包含一组照片的无序列表。导航设置得像一个过滤器,因此如果我单击 X,则仅显示 X 类别中的照片,等等。所有照片最初都设置为“可见”类,如下所示:
<ul>
<li class="visible">photo</li>
<li class="visible">photo</li>
<li class="visible">photo</li>
etc.
</ul>
当点击某个过滤器时,不属于该类别的照片会移除“可见”类别,从而导致它们淡出。然而,虽然照片淡出,但它们仍然占据相同的空间,导致出现大量空白空间。
我正试图摆脱这个空白空间。我的想法是编写如下代码:
如果
li没有“可见”类,则隐藏。否则,显示。
下面是我的尝试。但是,这会导致所有照片都不会显示。我哪里出错了?
jQuery(document).ready(function($){
if (!$( '#gallery-wrap li' ).hasClass( 'visible')) {
this.hide();
} else {
this.show();
}
});
最佳答案
一行就可以搞定
$('#gallery-wrap li').hide().filter('.visible').show();
它首先隐藏所有
,然后过滤可见
类并显示该子集
OR 可以用纯 CSS 做到这一点
#gallery-wrap li{ display:none}
#gallery-wrap li.visible{ display:inline-block}
关于javascript - 如果元素没有类,则不显示;否则,显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27612546/