javascript - 使折叠下的文本在切换隐藏显示时不移动

Question

当我切换文本的隐藏显示时，是否可以让 p 文本不移动？第一次使用折叠和类似的东西，尝试使用不同的位置值，但似乎都不起作用。

$('.testver a i').on('click', function (e) {
            var currTarget = $(this).closest('a').data('target').substr(1);
            $('#leftpanel').find('[id^="demo"]').not(currTarget).collapse('hide');
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div id="leftpanel">
<div class="testver">
<h1>Title</h1>
<a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo1">
<i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i>
<i class="fa fa-angle-up"><img  src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i>
</a>
<div id="demo1" class="collapse in" aria-expanded="true">
Lorem ipsum dolor sit amet, vix nihil voluptatibus in, aeque zril ut quo, habemus scripserit cu duo. Mel id debitis mediocritatem. Pro ex accumsan abhorreant. Esse mentitum expetendis id eam, id mel novum legimus.
</div>
<hr>
</div>

<div class="introus">
                    <p>Lorem ipsum dolor sit amet, vix nihil voluptatibus in, aeque zril ut quo, habemus scripserit cu duo. Mel id debitis mediocritatem. Pro ex accumsan abhorreant. Esse mentitum expetendis id eam, id mel novum legimus.</p>
                      
 </div>

Answer 1

如果我理解正确，您需要在切换顶部段落时底部段落不要移动。如果这是目标，那么您可以通过多种方式执行此操作，但结果是相同的:

jQuery 或...

$('p:last').css({
    'position': 'absolute',
    'bottom':0
});

CSS 或...

 p:last-of-type {position:absolute; bottom:0}

HTML

 <p style='position: absolute; bottom:0'>CONTENT</p>

为了防止文本重叠，请使用高度百分比(或 vh)而不是像素。在此片段中，我添加了以下段落规则:

 p {max-height: 20vh; overflow-y:auto;}

片段

$('.testver a i').on('click', function(e) {
  var currTarget = $(this).closest('a').data('target').substr(1);
  $('#leftpanel').find('[id^="demo"]').not(currTarget).collapse('hide');
});

$('p:last').css({
  'position': 'absolute',
  'bottom': 0
});

p {
  max-height: 20vh;
  overflow-y: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div id="leftpanel">
  <div class="testver">
    <h1>Title</h1>
    <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo1">
      <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i>
      <i class="fa fa-angle-up"><img  src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i>
    </a>
    <div id="demo1" class="collapse in" aria-expanded="true">
      Lorem ipsum dolor sit amet, vix nihil voluptatibus in, aeque zril ut quo, habemus scripserit cu duo. Mel id debitis mediocritatem. Pro ex accumsan abhorreant. Esse mentitum expetendis id eam, id mel novum legimus.
    </div>
    <hr>
  </div>

  <div class="introus">
    <p>Lorem ipsum dolor sit amet, vix nihil voluptatibus in, aeque zril ut quo, habemus scripserit cu duo. Mel id debitis mediocritatem. Pro ex accumsan abhorreant. Esse mentitum expetendis id eam, id mel novum legimus.</p>

  </div>