在展開文字中展開文字

Question

我發現了幾個代碼，提供了很棒的選項，可以在點擊另一個文字時展開文字。展開/摺疊功能，我相信我們都有點熟悉它們。

但是我主要感興趣的是，我怎樣才能擴大文本顯示從我已經從另一行擴展的文本塊？ 我的意思是，我會點擊一條線，它會顯示另一條線，我可以再次點擊，並顯示出第三條線之前根本不可見的線。

這有可能以任何方式？非常感謝您提前爲您提供的任何反饋意見！

Answer 1

你可以嘗試這樣的事情：https://jsfiddle.net/julienetienne/41g9f1pt/1/

的關鍵是要獲得索引，我喜歡把節點列表分爲數組，這樣你可以使用一流的功能。 這種粗糙的演示中，我提出需要對IE8的支持填充工具或兩個：

var section = document.getElementsByTagName('section')[0]; 
 
var sectionArray = [].slice.call(section.children); 
 
var lastElement; 
 

 
section.addEventListener('click', showHide, true); 
 

 
function showHide(e) { 
 
    var target = e.target; 
 
    var indexOfSection = sectionArray.indexOf(target); 
 
    var elementToToggleHeight; 
 
    // If element is a paragraph 
 
    if (target.tagName === 'P') { 
 
    var elementToToggle = section.children[indexOfSection + 1]; 
 

 
    if(indexOfSection + 1 < sectionArray.length){ 
 
     elementToToggleHeight = parseInt(window.getComputedStyle(elementToToggle, null).getPropertyValue("height"),10); 
 
     } 
 

 
    if (elementToToggleHeight) { 
 
     // Function to close all except current and first 
 
     sectionArray.forEach(function(paragraph){ 
 
     if(paragraph !== target && paragraph !== sectionArray[0]){ 
 
     paragraph.style.height = 0; 
 
     } 
 
     }); 
 

 
    } else { 
 
     if(elementToToggle) 
 
     elementToToggle.style.height = '1em'; 
 
    } 
 
    } 
 
}

p { 
 
    font-size: 1em; 
 
    cursor: pointer; 
 
    height: 0; 
 
    overflow: hidden; 
 
    background: yellowgreen; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
p:first-child { 
 
    height: auto; 
 
}

<section> 
 
    <p>The path of the righteous man is beset on all sides</p> 
 
    <p>by the inequities of the selfish and the tyranny of evil men</p> 
 
    <p>And I will strike down upon thee with great </p> 
 
    <p>vengeance and furious anger those who would attempt</p> 
 
    <p>to poison and destroy my brothers</p> 
 
</section>

Answer 2

我看到你所標記的jQuery，所以我寫的小非常簡單的例子https://jsfiddle.net/alienpavlov/khk40ygm/2/使用它：

$('.expand').click(function(e) { 
 
    e.stopPropagation(); 
 
    var $expand = $(this).children('.expand.hide'); 
 
    if ($expand.length >= 1) { 
 
     $expand.removeClass('hide'); 
 
    } else { 
 
     $(this).find('.expand').addClass('hide'); 
 
    } 
 
});

div { 
 
    padding: 15px; 
 
} 
 

 
.hide { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="expand"> 
 
    Some parent text 
 
    <div class="expand hide"> 
 
     1st level child 
 
     <div class="expand hide"> 
 
      2n level child 
 
     </div> 
 
    </div> 
 
</div>

在這個例子中，你可以有兩個以上的子元素