獲取它包含的另一個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 */
  });

});

這是一個小提琴 。 但是，如果您想隱藏顯示的詳細信息，我們可以添加“顯示較少”。 檢查第二個小提琴 。