Question

我为每个div编写代码以“显示更多”/“关闭”，并且当我打开一个然后已经先打开一个关闭而其他打开时，我已经编写了代码。

问题是，当我在同一个div按住关闭时，它重新打开并且不关闭它。我还输入了代码.not(this)，但实际上并没有用。问题还在于因为滚动功能不能很好地工作。

如果我在第一个div并且只是向左滚动到第二个并按下关闭它会跳到div顶部的文本中间，就像它想象的那样。

这是jquery代码：

    $('.cities').each(function(){
    var max = 7;
    var numLi = $(this).find('li').length;
    var list = $(this).find('li:gt(' + max + ')');
    var id = '#' + $(this).attr('id');

    list.hide();
    if(numLi > max){
        $(this).find('ul').append('<a class="more" name="'+id+'">Show more</a>');
    }
    $(this).find('.more').click(function(){
        // zapre vse odprte
        $('.cities').find('li:gt(' + max + ')').not(this).hide('slow');
        $('.cities .more').not(this).text('Show more');

        list.toggle('slow');
        $(this).text($(this).text() == 'Show more' ? 'Close' : 'Show more');  

        $('html,body').animate({scrollTop: $(id).offset().top},'slow');
    }); 
});

还有工作示例http://jsfiddle.net/B2MXD/1/

Answer 1

您可以使用slideToggle()。

$('.more').click(function(){
var max = 7;
    $(this).closest("ul").find('li:gt(' + max + ')').slideToggle();
    $(this).text($(this).text() == 'Show more' ? 'Close' : 'Show more');  
});

您不必遍历每个元素来绑定事件。只需使用$('.more').将事件绑定到类名为more

的所有元素

Demo

修改

$('.more').click(function(){ var max = 7; $('.more').not(this).each(function(){ $(this).closest("ul").find('li:gt(' + max + ')').slideUp(); $(this).text('Show more'); }); $(this).closest("ul").find('li:gt(' + max + ')').slideToggle(); $(this).text($(this).text() == 'Show more' ? 'Close' : 'Show more'); });

Updated fiddle

jquery显示更多/关闭bug

1 个答案: