Question

我有一个小脚本，我试图切换列表项与活动类的可见性。脚本本身正在工作，但我有一个问题，概念化如何始终在顶部显示可见项。

基本上，我希望活动项目显示在顶部，其他非活动的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');
});

Answer 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

Answer 2

尝试以下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;
}

Answer 3

您需要使用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>

Answer 4

Fiddle

为了达到预期的效果，我会更新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;
}

这样，活动项可能会滑到列表的顶部。

li切换活动类的可见性

4 个答案: