我有一些随机的区块。每当块落在新行中时,我都会让它看起来不一样。当用户单击一个按钮时,我通过display:none
隐藏了几个块,然后问题就发生了。nth-child
选择器还会计算隐藏元素的数量。
有没有办法忽略这些特定的块,这样每一行都有不同的样式?这是一个类似场景的示例。
$('.hide-others').click(function () {
$('.css--all-photo').toggleClass('hidden');
})
.board-item--inner {
height:200px;
background:tomato;
text-align:center;
color:#fff;
font-size:33px;
margin-bottom:15px;
border:2px solid tomato;
}
@media (min-width:768px) and (max-width:991px) {
.board-item:nth-child(2n+1) .board-item--inner {
border:2px solid #000;
background:yellow;
color:#000;
}
}
@media (min-width:992px) and (max-width:1199px) {
.board-item:nth-child(3n+1) .board-item--inner {
border:2px solid #000;
background:yellow;
color:#000;
}
}
@media (min-width:1200px) {
.board-item:nth-child(4n+1) .board-item--inner {
border:2px solid #000;
background:yellow;
color:#000;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="form-group">
<button class="btn btn-info hide-others" type="button">Hide others</button>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
<div class="board-item--inner">1</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
<div class="board-item--inner">2</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item css--all-photo">
<div class="board-item--inner">3</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
<div class="board-item--inner">4</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
<div class="board-item--inner">5</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item css--all-photo">
<div class="board-item--inner">6</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
<div class="board-item--inner">7</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item css--all-photo">
<div class="board-item--inner">8</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
<div class="board-item--inner">9</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
<div class="board-item--inner">0</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
<div class="board-item--inner">10</div>
</div>
</div>
<div>
只需浏览代码片段或EXTERNAL FIDDLE,您就会明白我的问题。
我专门寻找一个纯粹的CSS解决方案。请为你的答案提供一个小提琴!和我不能永久删除这些块,我的用户可以选择在按钮单击时过滤文件,这就是隐藏和显示场景的原因。
发布于 2015-09-03 23:59:15
当用户单击一个按钮时,我通过
display:none
隐藏了几个块,然后问题就发生了。nth-child
选择器还会计算隐藏元素的数量。
有没有办法忽略这些特定的块,这样每一行都有不同的样式?
问题是nth-child()
选择器查看同一父对象下的所有兄弟对象,而不考虑样式。应用display: none
并不重要,因为CSS不会从DOM中删除元素,因此它仍然是兄弟元素。
从规范中:
:nth-child(an+b)
伪类表示法表示一个元素,该元素在文档树中的前面有一个+b-1个兄弟元素,对于n的任何正整数或零值,它都有一个父元素。(强调我的)
为了让您声明的nth-child
规则在用户单击隐藏div后生效,您需要从DOM中删除隐藏的div,以便它们不再作为兄弟存在。
在您的问题中,您请求一个仅用于CSS的解决方案。但在您的评论中,您说HTML是开放的,可以更改。您还可以使用一些jQuery来隐藏元素。
只需在jQuery中添加一小行代码,问题就可以解决:
$('.hidden').remove();
.remove()
method将元素(及其后代)从DOM中取出。在本例中,它删除了类为hidden
的所有元素。
校正
remove()
的问题是,用这种方法从DOM中取出的元素无法恢复,这就破坏了切换功能。
幸运的是,jQuery提供了另一种选择:detach()
。
.detach()
方法与.remove()
相同,不同之处在于.detach()
保留与删除的元素相关联的所有jQuery数据。当以后要将删除的元素重新插入到DOM中时,此方法很有用。
所以如果我们替换原始代码..。
$('.hide-others').click(function () {
$('.css--all-photo').toggleClass('hidden');
})
...with这段代码...
var divs;
$('.photos-board-item').each(function(i){
$(this).data('initial-index', i);
});
$('.hide-others').on('click', function () {
if(divs) {
$(divs).appendTo('.row').each(function(){
var oldIndex = $(this).data('initial-index');
$('.photos-board-item').eq(oldIndex).before(this);
});
divs = null;
} else {
divs = $('.css--all-photo').detach();
}
});
..。网格按预期工作。(代码来源:@JosephMarikle)
现在,无论隐藏了哪些nth-child
或多少个div,都可以在不破坏可视化设计的情况下打开和关闭它们,因为div选择器只计算“可见”的兄弟项。不更改CSS。不更改HTML。
发布于 2015-09-04 11:00:00
我会通过组合:nth-of-type
选择器和对切换函数的小修改来做到这一点。
基本思想不是从DOM中删除那些.css--all-photo
元素,而是将它们包装到<hidden>
容器中。和unwrap()
来恢复全集。在这种情况下,:nth-of-type
将执行您对:nth-child
所做的完全相同的操作。
var state = false;
$('.hide-others').click(function () {
if( !state ) {
$('.css--all-photo').wrap('<hidden>');
state = true;
} else {
$('hidden').unwrap();
state = false;
}
})
hidden { display:none; }
.board-item--inner {
height:200px;
background:tomato;
text-align:center;
color:#fff;
font-size:33px;
margin-bottom:15px;
border:2px solid tomato;
}
@media (min-width:768px) and (max-width:991px) {
div.board-item:nth-of-type(2n+1) .board-item--inner {
border:2px solid #000;
background:yellow;
color:#000;
}
}
@media (min-width:992px) and (max-width:1199px) {
div.board-item:nth-of-type(3n+1) .board-item--inner {
border:2px solid #000;
background:yellow;
color:#000;
}
}
@media (min-width:1200px) {
div.board-item:nth-of-type(4n+1) .board-item--inner {
border:2px solid #000;
background:yellow;
color:#000;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="form-group">
<button class="btn btn-info hide-others" type="button">Hide others</button>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
<div class="board-item--inner">1</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
<div class="board-item--inner">2</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item css--all-photo">
<div class="board-item--inner">3</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
<div class="board-item--inner">4</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
<div class="board-item--inner">5</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item css--all-photo">
<div class="board-item--inner">6</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
<div class="board-item--inner">7</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item css--all-photo">
<div class="board-item--inner">8</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
<div class="board-item--inner">9</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
<div class="board-item--inner">0</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 board-item photos-board-item">
<div class="board-item--inner">10</div>
</div>
</div>
<div>
发布于 2015-09-03 18:11:50
您正在寻找的是nth-of-class,不幸的是,它并不存在!当您使用JS切换隐藏类时,这是隐藏的子类和显示的子类之间的唯一区别,因此您需要告诉css计算某些类的div(假设是“显示的”),但不幸的是,css第n个子选择器并不太关注子类的类。你可以阅读更多的here。
https://stackoverflow.com/questions/32355054
复制相似问题