Question

我有一个在行级别中具有更多/更少功能的表。我需要在表级别中包含“展开/折叠全部”选项，以便更容易一次展开所有行。

在我当前的代码中，行级别和表级别扩展在其个人身上运行良好。

但是，当我使用Dict flatten(Dict dict) { Dict new_dict = new Dict(); for (Pair pair : dict.pairs) { if (pair.value == null) new_dict.pairs.add(pair); else new_dict.pairs.addAll(combine(pair.key, flatten(pair.value))); } } List<Pair> combine(String key, Dict value) { //here value is a flattened dict List<Pair> pairs = new ArrayList<Pair>(); for (Pair pair : value.pairs) { pairs.add(new Pair(key + "_" + pair.key, pair.value)); } return pairs; }链接进行扩展时，行级别更多/更少的链接也应该一起执行。目前，当点击Expand All链接时，行级别更多/更少链接仍会显示为Expand All链接，但它应该会更改为More链接。

这是我的代码，

Less

DEMO

Answer 1

我已更新working fiddle with collapse

我做了以下更改：

使用$(this)设置点击的展开链接文字，而不是整个班级选择;

 $('a.tr_expand').click(function(event){
            event.preventDefault();
            $(this).parent().siblings().find("span.more_text").toggle(); 
             // console.log($(".tr_expand").text());
                    if ($(this).text() == "More") {
                        $(this).text("Less");
                    }
                    else {
                        $(this).text("More");
                    }

        });

在展开全部按钮中，循环浏览展开链接，只需触发链接点击即可获得更多＆＃39;更多＆＃39;文本，如果该行已经展开，则切换将再次折叠它，这不是预期的行为。

$('a.expand_all').click(function(event){
   event.preventDefault();
   $('a.tr_expand').each(function(){
      if($(this).text() == "More" && $('a.expand_all').text() == "Expand All" )
      {
          $(this).trigger('click');
      } 
      else if($(this).text() == "Less" && $('a.expand_all').text() == "Collapse All" )
      {
          $(this).trigger('click');
      } 

    });

    if ($(this).text() == "Expand All") {
         $(this).text("Collapse All");
     }
     else {
         $(this).text("Expand All");
     }
});

Answer 2

<强> DEMO

两件事

<强>一

$('a.tr_expand').click(function(event){
    event.preventDefault();
    $(this).parent().siblings().find("span.more_text").toggle();       
    //use $(this) to target current anchor element and check its text with .html
    if ($(this).html() == "More") {
        $(this).html("Less");
    }
    else {
        $(this).html("More");
    }
});

<强>两个

在expand_all内部click内，根据当前值再次更改html

$('a.expand_all').click(function(event){
    event.preventDefault();
    $(this).next().find(".grid_moretext span.more_text").toggle();    
    var elem=$(this).next().find('.tr_expand')
    if(elem.html()=="More")//check for html again
        elem.text('Less');
    else
        elem.text('More');
});

<强>更新

<强> DEMO

在class点击自身和tr_expand时添加Expand All以确定它是否已展开或已弃用如下：

$('a.tr_expand').click(function(event){
    event.preventDefault();
    var elem=$(this).parent().siblings().find("span.more_text");//store reference to element's more_text
    elem.toggle();//toggle it
    $(this).toggleClass('expand');//toggleClass expand
    if ($(this).html().trim() == "More") {
        $(this).html("Less");
    }
    else {
        $(this).html("More");
    }
});

接下来在Expand_all上点击循环浏览每个tr_expand及其siblings，然后根据tr_expand上的课程进行切换，如下所示：

$('a.expand_all').click(function(event){
    event.preventDefault();
    $('.tr_expand').each(function(){
        var elem=$(this);
        if(!elem.hasClass('expand'))//check if element is already expanded
        {
            //if no find all its `grid_moretext` element and toggle its span.more_text
            elem.closest('td').siblings(".grid_moretext").each(function(){
               $(this).find("span.more_text").toggle();    
            });
            if(elem.html()=="More")
            {
                $('a.expand_all').text('Collapse All')
                elem.text('Less');
            }
            else
            {
                $('a.expand_all').text('Expand All')
                elem.text('More');
            }
        }
        else
            elem.toggleClass('expand'); //if expand is not there add it again
    });
});

Answer 3

使用this，以便它引用点击的More链接。

if ($(this).text() == "More") {
  $(this).text("Less");
}
else {
  $(this).text("More");
}

Answer 4

这是更新的小提琴 - http://jsfiddle.net/z9hzstzc/1/。我已经通过将其置于循环中来更改$('tr.expand')的条件检查。

Answer 5

我在你的小提琴中做了以下更改

$('a.expand_all').click(function(event){
        if ($(".tr_expand").html() == "More") {
                    $(".tr_expand").html("Less");
                }
                else {
                    $(".tr_expand").html("More");
                }
    event.preventDefault();
    $(this).next().find(".grid_moretext span.more_text").toggle();    
    });

这是DEMO

Answer 6

使用 jQuery ：

$('a.tr_expand').text(function (i, t) {
    return t == 'More' ? 'Less' : 'More';
});

您可以轻松实现您的目标。

我已更新您的JSFiddle

    // For individual click events
    $('a.tr_expand').click(function (event) {
        event.preventDefault();
        $(this).parent().siblings().find("span.more_text").toggle();

        $(this).text(function (i, t) {
            return t == 'More' ? 'Less' : 'More';
        });
    });

   //For group toggle

   $('a.expand_all').click(function (event) {
       event.preventDefault();
       $(this).next().find(".grid_moretext span.more_text").toggle();
       $('.tr_expand').text(function (i, t) {
           return t == 'More' ? 'Less' : 'More';
       });
   });

它会为你做到这一点。

表行文本截断

6 个答案: