隱藏/顯示DD元素定義列表

Question

我一直無法找出（或發現）用於以下情形的解決方案：

我們有一個dl像這樣：

<dl> 
    <dt>Term</dt> 
     <dd>Item 1</dd> 
     <dd>Item 2</dd> 
     <dd>Item 3</dd> 
     <dd>Item 4</dd> 
     <dd>Item 5</dd> 
    <dt>Term</dt> 
     <dd>Item 1</dd> 
     <dd>Item 2</dd> 
     <dd>Item 3</dd> 
     <dd>Item 4</dd> 
     <dd>Item 5</dd> 
</dl> 

我們需要在每個dt組的前3個之後隱藏所有dds，並顯示「查看更多」鏈接，以便切換剩餘的可見性。

任何提示將不勝感激！

Answer 1

感謝大家的幫助。這就是我們最終的結果：

$(function(){ 
    $("dt").each(function(){ 
     var $dd = $(this).nextUntil("dt"); 
     if ($dd.length > 3 && $('input:checked', $dd).length < 1) { 
      $dd.filter(":gt(2)").hide(); 
      $dd.last().after($("<dd class='t'>View More</dd>").click(function(e){ 
       e.preventDefault(); 
       $(this).text($(this).text() == "View More"?"Hide More":"View More").prevAll("dt:first").nextUntil("dt").filter(":gt(2):not('dd.t')").toggle() 
      }).css({'cursor':'pointer', 'color':'#0000FF'})); 
     } 
    }); 
}); 

Answer 2

$('dd:nth-child(n+4)')

這應該選擇一切，但第3個DDS。這有助於：http://leaverou.me/demos/nth.html

Answer 3

可能有更好的方法來做到這一點，但這是我首先想到的。它發現dl內dt元素，然後通過他們循環，並隱藏了前3後的所有元素，直到下一個dt：

$("dl").find("dt").each(function() { 
    var count = 0; 
    $(this).nextUntil("dt").filter(function() { 
     return count++ > 2; 
    }).hide(); 
    $(this).append(" <a href='#' class='showMore'>See more</a>"); 
}); 
$(".showMore").live("click", function() { 
    $(this).closest("dl").find("dt").each(function() { 
     $(this).nextUntil("dt").show(); 
     //As suggested by comments, you may want to hide the 'Show more' link now: 
     $(this).remove(); 
    }); 
}); 

這裏有一個working example。

Answer 4

既然你的<dl>裏面是深刻的，我會插入包含「查看更多」最後<dd>標記後鏈接新<dd>元素，並給它一個類從包含的<dd>標籤區分實際數據。

$(document).ready(function() { 
    $('dt').each(function() { 
    var sel = $(this), dd = sel.nextUntil('dt'); 
    if (dd.length > 3) { 
     dd.slice(3).addClass('more hidden'); 
     dd.slice(dd.length-1).after('<dd class="viewMore"><a href="javascript:void(0)">view more</a></dd>'); 
    } 
    }); 
    $('dl').delegate('dd.viewMore a', 'click', function() { 
    $(this).closest('dd').prevUntil('dt').filter('.more').toggleClass('hidden'); 
    }); 
}); 

只要確保你有你的CSS是這樣的：

.hidden { display: none; } 

編輯：我固定它。 Here's the demo.

Answer 5

試試這個

$(function(){ 
    $("dt").each(function(){ 
    var $dd = $(this).nextUntil("dt"), $this; 
    $dd.filter(":gt(2)").hide(); 
    if($dd.length > 3){ 
     $dd.last().after($("<a href='#'>View More</a>").click(function(e){ 
      e.preventDefault(); 
      $(this).text($(this).text() == "View More"?"Hide More":"View More") 
      .prevAll("dt:first").nextUntil("dt").filter(":gt(2):not('a')").toggle() 
     })); 
    } 
    }); 
}); 

工作demo

Answer 6

工作例如：http://jsfiddle.net/APB6F/。該解決方案可讓您選擇切換顯示/隱藏功能。

$("dl").find("dt").each(function(k,v){ 
    var dtObj = $(this); 
    dtObj.nextUntil("dt").filter(function(index){ 
     if(index > 2){ $(this).hide(); } 
    }); 
    dtObj.append("<a href='#' class='view-more'>Show More</a>"); 
}); 

$(".view-more").live('click', function(){ 
    var mObj = $(this); 
    if(mObj.text() == "Show More"){ 
     mObj.closest("dt").each(function(k,v){ 
      var dObj = $(this); 
      dObj.nextUntil("dt").filter(function(index){ 
       $(this).show(); 
      });   
     }); 
     mObj.text("Hide More"); 
    }else{ 
     mObj.closest("dt").each(function(k,v){ 
      var dObj = $(this);    
      dObj.nextUntil("dt").filter(function(index){ 
       if(index > 2){ $(this).hide(); } 
      });   
     }); 
     mObj.text("Show More"); 
    } 
});