javascript - jquery 显示更多/关闭错误

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

您不必循环遍历每个元素来绑定(bind)事件。只需使用 $('.more'). 将事件绑定(bind)到具有类名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