用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元素位置。