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>

Answer 2

通过对崩溃进行div包装，切换和设置它的设置高度和宽度来解决这个问题，没有任何东西在移动，一切都很好！

使文本在崩溃下不移动切换隐藏显示

2 个答案: