用jquery截断列表

Question

如何为列表中的hide/show元素添加一个函数？

例如，我们有几个列表。当我们点击“显示”链接，将显示所有列表项，当我们点击“隐藏”链接，隐藏与指数大于3

<div class="filter_item"> 
... 
<h3>Network Name:</h3> 
<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
</ul> 
<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
</ul> 
<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
</ul> 
... 
</div> 

和JS代码

<script type="text/javascript"> 
    //<![CDATA[ 
     jQuery(document).ready(function($){ 
      $('.filter_item ul').each(function(){ 
       $('li:gt(2)', this).hide(); 
       if ($(this, 'li').children().length > 3) { 
        $(this, ':last').append('<li><a href="javascript:void(0);" class="tr_more">More...</a></li>'); 
       } 
      }); 
      $('.tr_more').toggle(function(){ 
       $(this).closest('li').siblings().show(); 
       $(this).attr('class', 'tr_less').text("Less..."); 
      }, function(){ 
       ???? 
      }); 
     }); 
    //]]> 
</script> 

列表中的项目

当我们点击“隐藏”链接时如何实现隐藏项目？

Answer 1

虽然这看起来过于复杂，这会为你工作：

$(this).closest('ul').children('li:gt(2):not(:last)').hide(); 

首先它搜索父<ul>，然后揣子<li> S，但叶子“显示/隐藏”链接的父级。

与$(this).closest('li').prevAll().slice(2).hide();一起工作不太好 - 它隐藏了第一个节点，而不是最后一个。 prevAll似乎以相反的顺序返回元素。

Answer 2

$('.hidelink').click(function(){ 
    $(this).children('li').hide(); 
}); 

这将做

Answer 3

您还可以使用.toggle()方法，

$(this).closest('ul').children('li:gt(2)').toggle(); 

你可以试试这个？

谢谢。

Answer 4

而不是显示并单独隐藏各元素的，你可以在前三后一类添加到li元素，然后用CSS来展示并通过添加类的ul父隐藏起来：

的Javascript：

$(function(){ 

    $('.filter_item ul') 
    .addClass('hidemore') 
    .each(function(){ $(this).find('li:gt(2)').addClass('more'); }) 
    .append($('<li/>').append($('<a/>').attr('href','javascript:void(0)').text('more...'))) 
    .find('a').toggle(function(){ 
    $(this).text('less...').closest('ul').removeClass('hidemore'); 
    },function(){ 
    $(this).text('more...').closest('ul').addClass('hidemore'); 
    }); 

}); 

CSS：

.filter_item ul.hidemore li.more { display: none; } 

注：
带有javascript:void(0)的href属性被添加到链接中，以便它们显示为链接，但不会在任何位置导航。这样点击处理程序不必停止事件。

添加元素后的.find('a')是因为它无法将单击事件处理程序添加到元素，直到它们被添加到页面中。 （如果在列表中的文本还包含链接，你需要添加一个类所添加的链接，使他们能够specifially在此阶段的目标。）

Answer 5

最终代码看起来像这样

jQuery(document).ready(function($){ 
    $('.filter_item ul').each(function(){ 
     $('li:gt(2)', this).hide(); 
     if ($(this, 'li').children().length > 3) { 
      $(this, ':last').append('<li><a href="javascript:void(0);" class="tr_more">More...</a></li>'); 
     } 
    }); 
    $('.tr_more').toggle(function(){ 
     $(this).closest('li').siblings().show(); 
     $(this).attr('class', 'tr_less').text("Less..."); 
    }, function(){ 
     $(this).closest('ul').children('li:gt(2):not(:last)').hide(); 
     var curr_ul_y_pos = $(this).closest('ul').prev().offset().top; 
     $('html:not(:animated), body:not(:animated)').animate({ 
      scrollTop: curr_ul_y_pos-5 
     }, 'normal'); 
     $(this).attr('class', 'tr_more').text("More..."); 
    }); 
}); 

隐藏事件后添加了被遗忘的属性。现在页面滚动到h3元素位置。