1

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

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

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

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

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

4

4 回答 4

1

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

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

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

行为- 单击 chow moretext 它将上下切换，如果这就是您要查找的内容，您可以将其隐藏以开始，就像这个演示=> http://jsfiddle.net/b6Sa3/

代码

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

        $(this).prev('div.hide-show-txt').toggle(1000);
    });
});
于 2013-10-20T21:18:08.690 回答
1

通过了解行高，您可以将高度设置为等于 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;
}
于 2013-10-20T22:18:23.127 回答
1

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

快速示例：

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

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

于 2013-10-20T21:10:07.730 回答
1

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

于 2013-10-20T21:20:41.283 回答