Question

我找到了几个代码，提供了很好的选项，可以在单击另一个文本时展开文本。展开/折叠功能，我相信我们都对它们有点熟悉。

我最感兴趣的是，我怎样才能从已经从另一行扩展的文本块中扩展文本节目？我的意思是我点击了一条线，它显示了另一条线，我可以再次点击它，并显示一个之前根本看不到的第三条线。

这有可能吗？非常感谢您提前花时间提供的任何反馈！

Answer 1

你可以尝试这样的事情：https://jsfiddle.net/julienetienne/41g9f1pt/1/

关键是要获取索引，我更喜欢将node-list放入数组中，这样你就可以使用第一类函数了。我制作的这个粗略演示需要一个或两个填充，以支持IE8：

＆＃13;

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';
    }
  }
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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>

在此示例中，您可以拥有2个以上的子元素

在扩展文本中扩展文本

2 个答案: