我有一个小脚本,我试图切换列表项与活动类的可见性。脚本本身正在工作,但我有一个问题,概念化如何始终在顶部显示可见项。
基本上,我希望活动项目显示在顶部,其他非活动的li元素应该消失。我如何实现这一目标?
这是我到目前为止所做的:
HTML:
<ul class="list-group">
<li class="list-group-item active">test 1</li>
<li class="list-group-item">test 2</li>
<li class="list-group-item">test 3</li>
<li class="list-group-item">test 4</li>
</ul>
<button class="next btn btn-primary">Click</button>
的CSS:
.list-group-item {
border-radius: 0 !important;
visibility: hidden;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.list-group-item.active {
visibility: visible;
}
jquery的:
$('.next').click(function() {
$('.list-group-item.active').next().addClass('active');
$('.list-group-item.active').prev().removeClass('active');
});
答案 0 :(得分:1)
使用此更新的CSS
.list-group-item {
border-radius: 0 !important;
display: none;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.list-group-item.active {
display: block;
}
<强> Fiddle 强>
答案 1 :(得分:0)
尝试以下css。我只使用js更改了显示属性以平滑过渡。 这里有更新的小提琴https://jsfiddle.net/353t69c6/6/
$('.next').click(function() {
$('.list-group-item.active').next().addClass('active');
$('.list-group-item.active').prev().removeClass('active');
setTimeout(function(){$('.list-group-item').hide();$('.list-group-item.active').show()} ,500);
});
css是一样的
.list-group-item {
border-radius: 0 !important;
visibility: hidden;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.list-group-item.active {
visibility: visible!important;
}
答案 2 :(得分:0)
您需要使用position
来实现此目标,将active
li position
absolute
设为父元素并添加top:0
之类的,
$('.next').click(function() {
var $a=$('.list-group-item.active');
$('.list-group-item.active').removeClass('active');
// wait to hide active element
setTimeout(function(){$a.next().addClass('active');},1000);
});
.list-group-item {
border-radius: 0 !important;
visibility: hidden;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.list-group{
position:relative;
}
.list-group-item.active {
visibility: visible;
position:absolute;
top:0;
width:100%;
}
<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/2.1.1/jquery.min.js"></script>
<ul class="list-group">
<li class="list-group-item active">test 1</li>
<li class="list-group-item">test 2</li>
<li class="list-group-item">test 3</li>
<li class="list-group-item">test 4</li>
</ul>
<button class="next btn btn-primary">Click</button>
针对跳跃问题进行了更新
$('.next').click(function () {
var $a = $('.list-group-item.active').next();
$('.list-group-item.active').removeClass('active');
if (!$a.length) {
$a = $('.list-group-item:first');
}
// wait to hide active element
setTimeout(function () {
// add position and get into top
$a.addClass('active').css({
'position': 'absolute',
'top': 0,
'width': '100%'
});
$('.list-group-item:not(.active)').removeAttr('style');
if($a.prev().length){
//$a.prev().removeAttr('style');
} else {
//$('.list-group-item:first').removeAttr('style');
}
}, 1000);
});
.list-group-item {
border-radius: 0 !important;
visibility: hidden;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.list-group {
position:relative;
}
.list-group-item.active {
visibility: visible;
/*position:absolute;
top:0;
width:100%;*/
}
<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/2.1.1/jquery.min.js"></script>
<ul class="list-group">
<li class="list-group-item active" style="position:absolute;top:0;width:100%">test 1</li>
<li class="list-group-item">test 2</li>
<li class="list-group-item">test 3</li>
<li class="list-group-item">test 4</li>
</ul>
<button class="next btn btn-primary">Click</button>
答案 3 :(得分:0)
为了达到预期的效果,我会更新CSS,以便您转换高度和可见性。将不可见(非活动)元素的高度,边距,填充和边界全部设置为零也很有帮助,如:
.list-group-item {
border-radius: 0 !important;
display:block;
height: 0;
padding:0;
margin:0;
border:0;
visibility: hidden;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.list-group-item > * {
display:none;
height:0;
}
.list-group-item.active {
visibility: visible;
height:100px;
padding: 10px;
}
.list-group-item.active > * {
display:none;
}
这样,活动项可能会滑到列表的顶部。