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

可能有更好的方法可以做到这一点，但这是我首先提出的。它会找到dt中的dl元素，然后循环显示它们并隐藏前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 2

由于您位于<dl>的深处，我会在最后一个<dd>标记后面插入一个新的<dd>元素，其中包含“查看更多”链接，并给它一个class，用于区分包含实际数据的<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 3

试试这个

$(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 4

工作示例：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 5

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

这应该选择除前3个dds之外的所有内容。这有助于：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'}));
        }
    });
});

在定义列表中隐藏/显示DD元素

6 个答案: