li切换活动类的可见性

时间:2015-10-01 04:44:14

标签: jquery css

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

基本上,我希望活动项目显示在顶部,其他非活动的li元素应该消失。我如何实现这一目标?

这是我到目前为止所做的:

fiddle

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');
});

4 个答案:

答案 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)

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;
}

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