jquery hide显示列表

Question

jquery hide显示项目很少出现问题。

得到一张图片列表，想要显示第一张图片但隐藏其余图片，当用户点击下一张图片时，当前图片被隐藏，然后显示下一个列表项目。

一直在撞墙撞墙，可能有一个非常简单的解决方案，但由于某种原因，我无法看到它。将不胜感激的任何建议。

$(function() { 
    $('#feat>li:gt(0)').hide(); 
    var $links = $('#feat>li'); 
    var $item = $('#feat>li'); 

    $links.click(function() { 
     var $par = $(this); 
     $par.slideUp(700, function() { 
      var index = $links.index($par.get(0)) 
      $item.eq(index).slideDown(700); 
     }); 
    }); 
}); 

    <div id="feature"> 
    <ul id="feat"> 
     <li><img src="images/sample.png" /><a href="#">Next</a></li> 
     <li><img src="images/sample2.jpg" /><a href="#">Next</a></li> 
     <li><img src="images/sample.png" /><a href="#">Next</a></li> 
    </ul> 
</div> 

Answer 1

未经检验的，应该工作：

$('#feat li').hide().eq(0).show(); 

// Option 1: Simultaneous slidings: 
$('#feat a').click(function() { 
    $(this).parent().slideUp().next().slideDown(); 
}); 

// Option 2: Hide first, then show: 
$('#feat a').click(function() { 
    $(this).parent().slideUp(700, function() { 
     $(this).next().slideDown(); 
    }) 
});