Question

我有一个div，里面有内容。

内容可能很长，或内容可能非常小。

我不希望内容在页面加载时拉伸页面，如果它很长，我希望它们单击“更多”链接，它将向下滑动并显示其余内容。

例如：

Lorem ipsum dolor坐下来，精神上的精神。 Suspendisse vulputate mi egestas ligula feugiat volutpat。 Morbi eros felis，varius id，sodales quis nunc。 Nulla sagittis consectetur arcu，sed auctor odio placerat quis。 Praesent vitae lacus neque。 Curabitur ultricies tristique sollicitudin。在临终关节中使用Suspendisse malesuada nunc at facilisis ipsum gravida。

下面是一个显示“显示其余”的栏或链接

单击此按钮，此div将延长并显示其余内容：

Nunc congue sapien sed sem tincidunt ut adipiscing neque lacinia。 Praesent facilisis quam sed tellus sodales id tristique massa ullamcorper。 Donec sem turpis，元素id中的cursus，tincidunt libero。 Etiam feugiat，sem quis dictum imperdiet，nisl ante pharetra erat，ut ornare nulla justo ac sapien。

Lorem ipsum dolor sit amet，   奉献精神。   Suspendisse诋毁mi egestas   ligula feugiat volutpat。 Morbi eros   felis，在varius id中的aliquam，sodales   quis nunc。 Nulla sagittis consectetur   arcu，sed auctor odio placerat quis。   Praesent vitae lacus neque。 Curabitur   ultricies tristique sollicitudin。   Suspendisse malesuada nunc在augue   在facilisis ipsum gravida的interdum。   Nunc congue sapien sed sem tincidunt   adipiscing neque lacinia。 Praesent   facilisis quam sed tellus sodales id   tristique massa ullamcorper。 Donec sem   turpis，元素id中的cursus，   tincidunt一个自由人。 Etiam feugiat，sem   quis dictum imperdiet，nisl ante   pharetra erat，ut ornare nulla justo   ac sapien。

我知道很难控制什么会被切断，等等但不是那种类型的东西。 div不包含文本，它包含一个功能列表，例如X列表可能有4个功能，Z列表可能有14个功能，而不是页面拉伸如果列表有垂直列出的14个功能，我们希望它只显示一些，然后他们必须点击“告诉我更多”，让它向下滑动并显示其余部分。

我该怎么做呢？甚至是一个jsfiddle来演示它？

谢谢：）

Answer 1

尝试给div一个固定的高度。您可以使用CSS。然后比较列表的高度和外部div。如果它更大，则显示链接显示更多的栏。单击此栏，您可以管理外部div的高度。像这样 -

<强> CSS

   .parentDiv{
              height:some fixed height px;
              overflow: auto;
              }

<强> Jquery的

          var parentHeight = $('.parentDiv').height();
          var listHeight = $('#List').outerHeight(true);
          if(parentHeight < listHeight) {
                   $('#linkBar').show();
                }
          $('#linkBar').click(function(){
            //$('.parentDiv').height(listHeight);
            //OR you can use following code to animate the div
            $('.parentDiv').animate({'height': listHeight}, 'slow')
            });

Answer 2

这是我的实施的一个工作演示（巧合地类似于上面给出的答案;我在给出任何答案之前就这样做了）：http://jsfiddle.net/7fhrN/15/

适用于没有 JavaScript的用户，可以优雅地降低页面质量。尝试在JsFiddle上随机切换JS库，然后单击运行。

<强> HTML：

<div class="stretchy">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate mi egestas ligula feugiat volutpat. Morbi eros felis, aliquam in varius id, sodales quis nunc. Nulla sagittis consectetur arcu, sed auctor odio placerat quis. Praesent vitae lacus neque. Curabitur ultricies tristique sollicitudin. Suspendisse malesuada nunc at augue interdum at facilisis ipsum gravida.</div> <div class="stretchy">Nunc congue sapien sed sem tincidunt ut adipiscing neque lacinia. Praesent facilisis quam sed tellus sodales id tristique massa ullamcorper. Donec sem turpis, cursus in elementum id, tincidunt a libero. Etiam feugiat, sem quis dictum imperdiet, nisl ante pharetra erat, ut ornare nulla justo ac sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate mi egestas ligula feugiat volutpat. Morbi eros felis, aliquam in varius id, sodales quis nunc. Nulla sagittis consectetur arcu, sed auctor odio placerat quis. Praesent vitae lacus neque. Curabitur ultricies tristique sollicitudin. Suspendisse malesuada nunc at augue interdum at facilisis ipsum gravida. Nunc congue sapien sed sem tincidunt ut adipiscing neque lacinia. Praesent facilisis quam sed tellus sodales id tristique massa ullamcorper. Donec sem turpis, cursus in elementum id, tincidunt a libero. Etiam feugiat, sem quis dictum imperdiet, nisl ante pharetra erat, ut ornare nulla justo ac sapien.</div>

<强> CSS：

.stretchy { margin: 20px; padding: 5px; background-color: rgb(240, 240, 240); overflow: hidden; position: relative; padding-bottom: 20px; } .inner { max-height: 120px; overflow: hidden; } .reveal { position: absolute; bottom: 0px; }

<强> JavaScript的：

$(document).ready(function() { $('.stretchy').each(function() { if ($(this).height() > 130) { $(this).replaceWith('<div class="stretchy"><div class="inner">' + $(this).html() + '</div><a href="#" class="reveal">Show me more lipsum</a></div>'); } }); $('.reveal').toggle(function() { $(this).parent().find('.inner').animate({maxHeight: '1000px'}); }, function() { $(this).parent().find('.inner').animate({maxHeight: '120px'}); }); });

基本上，我使用类<div>迭代所有stretchy s。如果它们太大，我会使用带有容器的<div>替换它们，并在底部添加一个链接，将内部max-height的{{1}}更改为一些荒谬的值。

试试吧。看到＆gt;让我向你解释一下。

jQuery .. div显示/幻灯片？

2 个答案: