最近工作中遇到一个需求,ul下的子元素li全部都是隐藏状态的话,整个ul都要隐藏掉,当有其中一个li不是隐藏的,ul要显示出来。
实现方法:
<ul class="qwe" style="display: none;">
<li style="display: none;">123456</li>
<li style="display: none;">123456</li>
<li style="display: none;">123456</li>
<li style="display: none;">123456</li>
<li style="display: none;">123456</li>
</ul>
<script>
//这个要用到filter()方法
//filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
//注意: filter() 不会对空数组进行检测。
//注意: filter() 不会改变原始数组。
var l = $('.qwe:hidden>li').filter(function(){
return $(this).css('display')==='none';
}).length;
//获取的变量l就是符合隐藏条件的长度
//当l与li的长度相等时隐藏,否则显示
if(l === $('.qwe li').length){
$('.qwe').hide()
}else{
$('.qwe').show()
}
</script>