jquery - 用jquery显示下一个时如何隐藏上一个？

Question

我没有找到 joomla 2.5 的垂直新闻滚动条所以我想自己制作。

首先，我隐藏了前两个列表，然后我想在单击时显示下一个列表，但我做错了

$('ul li').slice(2).hide();
$('#up').on('click',function(){
    $('ul li').slice(3).hide();    
});

这是演示

我还想显示下一个列表并隐藏以前的第一个列表。我能怎么做？

编辑

好的，现在我已经像使用这个演示一样工作了

var countnews = 3;
$('ul li').slice(countnews).hide();
$('#up').on('click',function(){
    $('ul li').show();    
    $('ul li').slice(countnews++).hide();
});

现在，如何在显示下一个时隐藏上一个？

Answer 1

尝试这个，

var start = 0;
var end = 3;
var len=$('li').length;
$('ul li').hide().slice(start, end).show();
$('#up').on('click',function(){
    if(end<len)
    {
       start++;end++;
       $('ul li').hide().slice(start, end).show();    
    }
});

小提琴

对于羽绒

$('#down').on('click',function(){
    if(start>0)
    {
       start--;end--;
       $('ul li').hide().slice(start, end).show();    
    }
});

更新小提琴

用动画更新代码

$('#up').on('click',function(){
    if(end<len)
    {
        $('ul li').slice(start, end).slideUp(500);  
        start++;end++;
        setTimeout(function(){
           $('ul li').hide().slice(start, end).slideDown(500); 
        },500);

    }
});
$('#down').on('click',function(){
    if(start>0)
    {
         $('ul li').slice(start, end).slideUp(500);  
         start--;end--;
         setTimeout(function(){
            $('ul li').hide().slice(start, end).slideDown(500); 
         },500);
    }
});

动画小提琴

Answer 2

这个怎么样

var start = 0;
var end = 2;

$('ul li').hide().slice(start, end ).show();
$('#up').on('click',function(){
    //$('ul li').show();
    start++;end++;
    //alert(start)
    $('ul li').hide().slice(start, end ).show();    
});

更新 fiddle 以同时使用up和down。小提琴

Answer 3

你需要给这样的脚本

  $(document).ready(function(){     
        $('ul li').slice(3).hide();
        $("#up").click(function(){
            $('ul li').show();
            $('ul li').slice(0,3).hide()
            //alert('dk');

         });    

        })

Answer 4

在名为Accordion的 jQueryUi 中有非常好的实现这种行为- 尝试使用它（或者只是检查源代码作为您特定需求的基础）