Question

~~我找不到joomla 2.5的垂直新闻卷轴所以我想自己制作。~~

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

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

here is the demo

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

修改

好的，现在我的工作就像使用这个demo

一样

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

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

Answer 1

this

怎么样？

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

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

Answer 2

试试这个，

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

Fiddle

down

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

Updated Fiddle

使用动画

更新代码

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

Animated Fiddle

Answer 3

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

Answer 4

你需要像这样给出脚本

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

         });    

        })

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

4 个答案: