Question

假设我有这样的一个;

<ul>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

我希望使用jquery显示3 li，在3之后添加更多名为更多的li，当点击show all li并追加到名为less的最后一个li

Answer 1

这应该有用.. =）只需将索引更改为您要显示的项目数。

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<script>
var index = 2;
$('ul li:gt('+index+')').hide();
$('ul').append('<li class="more">more...</li>');
$('ul li.more').click(function() {
  $('ul li.more').remove();
  $('ul li:gt('+index+')').show();
});
</script>

Answer 2

我试过这个：

你的HTML：

<ul id='ul'>
    <li>2</li>
    <li>3</li>
    <li id='more'>more</li>
    <li id='4' style='display:none'>4</li><br/>
    <li id='5' style='display:none'>5</li><br/>
    <li id='less' style='display:none'>less</li> 
</ul>

你的jQuery：

$('#more').click(function(){
    $('#more').css('display','none');
    $('#4').css('display','inline');
    $('#5').css('display','inline');    
    $('#less').css('display','inline');    
});

$('#less').click(function(){
    $('#less').css('display','none');
    $('#4').css('display','none');
    $('#5').css('display','none');    
    $('#more').css('display','inline');    
});

请参见此工作here。

如果我错了，请纠正我。

Answer 3

HTML代码的完整演示：我已从此代码http://jsfiddle.net/gaby/tNGxN/3/

获得帮助

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>HTML list (ul) expand/collapse - more/less</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
  <script type="text/javascript">
    $(window).load(function(){
      $('ul li').hide().filter(':lt(3)').show();

      $('ul').append('<li><span> + Read More</span><span class="hide-items"> - Read Less</span></li>')
      .find('li:last').click(function(){
        $(this)
          .siblings(':gt(2)')
          .toggle()
          .end()
          .find('span')
          .toggle();
      });
    });
  </script>

  <style>
    .hide-items{display:none;}
  </style>

</head>
<body>
  <ul>
    <li>item one</li>
    <li>item two</li>
    <li>item three</li>
    <li>item four</li>
    <li>item five</li>
    <li>item six</li>
</ul>

</body>
</html>

Ul列表扩展 - 越来越少

3 个答案: