Ul list expand - less and more_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-12 05:21 出处：网络

assume that i h开发者_运维知识库ave one like this; <ul> <li>2</li> <li>3</li>

相关专题：jquery

assume that i h开发者_运维知识库ave one like this;

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

i want use jquery to show 3 li and after the 3 one append a more li named more and when click show all li and append in the last li named less

This should work.. =) Just change index to the number of items you want to show.

<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>

I have tried this :

your 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>

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

See this working here.

Correct me if I am wrong.

A full demonstration of HTML code: I've taken help from this code 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>