获取它包含的另一个div的div的内容

Question

点击see more button时，会显示第二段，但屏幕截图中显示的间隔存在差距。我希望第二段继续第一段

function ClickParent(ClickElem,ElemFind)
    {   
        $("."+ClickElem).click(function() {
            var GetGrp  =   $(this).parents(".group");
            GetGrp.find("."+ElemFind).fadeToggle();
        }); 
    }

// Find one level
ClickParent('name','moreinfo');
// Find another level
ClickParent('moreinfo','evenmore');

<div class="group">
    <a href="#" class="name" style="color:black;">How are you?</a>
    <div class="moreinfo" style="display: none;">
        Fine
    </div>
    <div class="evenmore" style="display: none;">
        Even more stuff.
    </div>
</div>

如何从How are you?获得结果？ Fine答案应该在没有空格的问题旁边。

Answer 1

我现在得到你想要的项目。您想要为您的文章提供“阅读更多”功能。

使用<div></div>隐藏继续的文字/字符串会导致换行。您只需将其替换为<font></font>。

<!-- FIRST ARTICLE -->
<div class="group">
  <a href="#" class="name" style="color:black;">This is the first article that would </a>
  <font class="evenmore" style="display: none;">
    show more information about this first article.
  </font>
  <div class="moreinfo">
    See more
  </div>
</div>

<!-- SECOND ARTICLE -->
<div class="group">
  <a href="#" class="name" style="color:black;">This is the second article that would </a>
  <font class="evenmore" style="display: none;">
    show more information about this second article.
  </font>
  <div class="moreinfo">
    See more
  </div>
</div>

然后让我们创建一个脚本，当点击“查看更多”时，它会隐藏“查看更多”并显示<font></font>内的内容。

$(document).ready(function(){

  $(".moreinfo").click(function(){ /* WHEN SEE MORE IS CLICKED */
    var elem = $(this);
    $(this).fadeOut(200).hide(); /* HIDE THE CLICKED SEE MORE */
    elem.closest("div.group").find('font.evenmore').fadeIn(200).show(); /* SHOW THE CONTENT OF THE CLOSEST FONT */
  });

});

这是fiddle。但是如果你想隐藏显示的细节，我们可以添加一个“显示更少”。检查第二个fiddle。