Question

我正在尝试编写一些代码，或者找到一个插件，它会占用几个动态生成的段落并显示前3行并隐藏其余部分。

亚马逊上的某些产品页面具有此类功能。

然后，通过触发器，允许用户显示更多内容，然后一旦打开，隐藏内容。

div的高度和包含的p将不会被知道，因为它们是动态生成的。加价可能看起来像..

<div class="hide-show-txt">
  <p>Lorem ipsum dolor etc. etc……</p>
  <p>Some more lorem ipsum dolor etc. etc……</p>
</div>
<div id="hide-show-user-trigger">
<span>Show More Text</span>

Answer 1

我会将文本存储在另一个变量中，然后当它处于“隐藏”模式时，您只显示让前100个字符，然后将“...”附加到它。当用户单击“show”选项时，将文本值或内容更改为完整字符串。如果你需要一个例子，我可以为你写一个。

快速举例：

  var allText = "all the text is stored like this";

  $("yourDiv:show").on("click", function(){
     $("divContent").text(allText);
  });

  $("yourDiv:hide").on("click", function(){
     var shortstring = allText.subString(0, 150) + "...";
     $("divContent").text(shortString);
  });

简单，但只展示了如何管理它的简短示例。显然，请使用更好的命名方案。哈哈：）

Answer 2

试试工作演示 http://jsfiddle.net/uRmr3/

API：http://api.jquery.com/toggle/

休息，您可以在演示中看到行为，希望它符合您的需求:)

行为 - 点击chow moretext它会上下切换，如果那就是你要找的东西，你可以把它隐藏起来，比如这个演示 =＆gt ; http://jsfiddle.net/b6Sa3/

<强>代码

$(document).ready(function () {
    $('#hide-show-user-trigger').on('click', function () {

        $(this).prev('div.hide-show-txt').toggle(1000);
    });
});

Answer 3

试试这个jQuery插件。它有一些不错的功能。 http://plugins.learningjquery.com/expander/demo/index.html

Answer 4

通过了解线高，您可以将高度设置为等于3行。然后使用一些简单的jQuery，我们可以在单击更多内容时将其更改为自动高度。

以下是一个有效的例子： http://jsfiddle.net/Nct6e/

HTML：

<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra, justo in ornare lobortis, tortor dolor tempus nunc, a fermentum dui justo nec tortor. Nunc dapibus auctor accumsan. Nullam faucibus tortor erat, quis ultrices metus tincidunt sagittis. Vestibulum nec urna metus. Phasellus lorem ligula, hendrerit nec magna vel, elementum molestie tortor. In sapien ante, rutrum posuere malesuada ac, mattis a purus. Mauris at diam sem. Praesent ac neque aliquet, pharetra est a, gravida lorem. Cras eget risus velit. Praesent sed tempor orci. Ut eu metus sit amet lectus imperdiet aliquet. Curabitur at leo erat. Mauris magna est, consectetur tincidunt pharetra quis, lobortis eu erat. Phasellus egestas lorem quis augue hendrerit eleifend in ac leo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam ac arcu nec orci rutrum aliquet non at augue.</p>
    <div class="read-more">Read more</div>
</div>

jQuery的：

(function() {
    var expanded = 0;
    $(".content .read-more").on("click", function() {
        if(expanded == 0) {
            $(this).siblings("p").css("height", "auto");
            $(this).text("Show less");
            expanded = 1;
        } else {
            $(this).siblings("p").css("height", "60");
            $(this).text("Show more");
            expanded = 0;
        }
    })
})();

的CSS：

.content {
    background: #eee;
    padding: 10px;
    line-height: 20px;
}

.content p {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 60px;
}

.content .read-more {
    text-align: center;
    font-weight: bold;
    cursor: pointer;
}

试图为div中的para写一些“显示/隐藏更多文本”功能

4 个答案: