Question

我想首先将3 li显示为内联块，然后使用＆＃34;加载更多＆＃34;链接，也是内联块li元素。我现在拥有的是： http://jsfiddle.net/dvm3qskg/

问题是我使用的是css("display", "inline-block")而不是show（），因为当我使用show()时，我的列表元素是display:list-type而我想使用show()，因为我会喜欢给它添加一些动画。有关如何实现这一目标的任何想法？

Answer 1

您可以将faeIn和fadeOut效果用于动画我通过编辑你的脚本完成了，参考下面的代码：

$(document).ready(function () {
    size_li = $("#myList li").size();
    x=3;
    $('#myList li:lt('+x+')').fadeIn('slow').css("display","inline-block");
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('#myList li:lt('+x+')').fadeIn('slow').css("display","inline-block");
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('#myList li').not(':lt('+x+')').fadeOut('slow').css("display","none");
    });
});

希望它对你有所帮助。快乐的编码：）

Answer 2

您可以在CSS中设置inline-block到li元素（show和hide方法会记住此值）：

CSS：

li {
  display: inline-block;
}
#myList li {
  display: none;
}
#loadMore {
  color: green;
  cursor: pointer;
}
#loadMore:hover {
  color: black;
}
#showLess {
  color: red;
  cursor: pointer;
}
#showLess:hover {
  color: black;
}

JS：

$(document).ready(function() {
  size_li = $("#myList li").size();
  x = 3;
  $('#myList li:lt(' + x + ')').show('500');
  $('#loadMore').click(function() {
    x = (x + 5 <= size_li) ? x + 5 : size_li;
    $('#myList li:lt(' + x + ')').show('500');
  });
  $('#showLess').click(function() {
    x = (x - 5 < 0) ? 3 : x - 5;
    $('#myList li').not(':lt(' + x + ')').hide('500');
  });
});

jQuery show（）将元素列为内联块

2 个答案:

JSFIDDLE