隐藏/显示定义列表中的 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>

我们需要隐藏第一个之后的所有 dds 3 对于每个 dt 组，并显示一个“查看更多”链接，该链接将切换其余组的可见性。

任何提示将不胜感激！

Answer 1

工作示例：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");
    }
});

Answer 2

可能有更好的方法来做到这一点，但这是我首先想到的。它在 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();
    }); 
});

这是一个 < href="http://jsfiddle.net/sxqFa/2/" rel="nofollow">工作示例。

Answer 3

由于您位于

的深处，因此我会在最后一个 之后插入一个新的

元素，其中包含“查看更多”链接>

标签，并为其指定一个类，以将其与包含实际数据的

标签区分开来。

$(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; }

编辑：我修复了它。 这是演示。

Answer 4

试试这个

$(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()
        }));
     }  
   });
});

工作演示

Answer 5

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

这应该选择除前 3 个 dd 之外的所有内容。这有帮助：http://leaverou.me/demos/nth.html

Answer 6

感谢大家的帮助。这就是我们最终的结果：

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