확장 텍스트 내에서 텍스트 확장하기

Question

다른 옵션을 클릭 할 때 텍스트가 확장되도록하는 훌륭한 옵션을 제공하는 몇 가지 코드를 발견했습니다. 확장/축소 기능, 나는 우리 모두가 그들과 다소 친숙하다고 생각합니다.

내가 주로 관심을 갖고있는 것은 내가 이미 다른 줄에서 확장 한 텍스트 블록에서 텍스트 표시를 확장 할 수 있습니까? 줄을 클릭하면 다시 클릭 할 수있는 다른 줄이 표시되고 전에 볼 수 없었던 세 번째 줄이 표시됩니다.

어쨌든 가능합니까? 사전에 시간을내어 의견을 보내 주셔서 감사합니다.

Answer 1

당신은 이런 식으로 뭔가를 시도 할 수 있습니다 : https://jsfiddle.net/julienetienne/41g9f1pt/1/

키는 인덱스를 얻는 것입니다, 내가 배열로 노드 목록을 넣어 선호, 당신은 최고 수준의 기능을 사용할 수 있습니다 그런 식으로.

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/ 쓰기 : 내가 만든이 거친 데모는 IE8 지원을위한 polyfill 또는 두 가지가 필요합니다

$('.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>

이 예제에서는 2 개 이상의 자식 요소를 가질 수 있습니다