Question

jquery隐藏显示项目几乎没有问题。

获得一个图像列表，想要显示第一个图像但隐藏其余图像，当用户单击下一个时，隐藏当前图像，然后显示下一个列表项。

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

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

Jquery隐藏显示列表

1 个答案: