1

我想在 jquery 中实现一个简单的阅读更多功能，我可以在其中切断一些内容，然后使用按钮显示/隐藏其余部分。

如果它是一个简单的文本块，我可以简单地将其余部分包装在一个跨度中，但内容可以是 html。

例如：

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea --CUT OFF HERE-- commodo consequat. Duis aute irure dolor in reprehenderit in</p>
<p> voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

在这个例子中，我想在第一个 p 中间的标记--CUT OFF HERE-处切断。但是，它可能不在 ap 内，或者也可能没有 html。如果它在那里，我只需要迎合它

如何做到这一点？

4

3 回答 3

3

http://jsfiddle.net/mblase75/65u5R/

这是一个有点复杂的解决方案。结果是您使用.html()将内容的前半部分附加到 HTML 元素，并让 jQuery 为您关闭它。然后，当单击“阅读更多”链接时，.html()再次使用整个字符串填充 HTML 元素，减去“--CUT OFF HERE--”段。

var allstr = "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea --CUT OFF HERE-- commodo consequat. Duis aute irure dolor in reprehenderit in</p><p> voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
    $container = $('#container'),
    splitstr = "--CUT OFF HERE--",
    arr_str = allstr.split(splitstr),
    fstr = (arr_str[0] === allstr) ? allstr : arr_str[0]+"...",
    readmore = "<a href='#'>Read more</a>";

$container.html(fstr);

$(readmore).on('click',function(e) {
    e.preventDefault();
    $(this).parent().html(arr_str.join(''));
}).appendTo($container);
于 2013-05-21T18:33:43.347 回答
-1

不确定这是否真的是您正在寻找的。看看下面的代码：

<p>Click the button to show or hide the content below <input id="button" type="button" value="Read More" /> </p> 

<p id="show_hide" style="display:none;">This content will show and hide on click</p>
(function() { $('#button').click(function() { $('#show_hide').toggle(300); }) })(jQuery);


这里真的没有什么特别的。我最初隐藏了应该在用户单击按钮时显示的“显示/隐藏”段落。内联 CSS 仅出于此问题的目的而完成。否则，专家建议您将 CSS 编写在外部文件上...然后我使用click事件处理程序中的toggle()函数来使动画发生...

在这里看小提琴：http: //jsfiddle.net/wuGbh/

于 2013-05-21T18:54:13.247 回答
-1

首先，你不应该在 html 中显示文本而不用任何 html 标签包装它。有多种方法可以用任何 html 标签、div、p、span 等来包装你的文本。所以我假设你的文本包装器是 div 或任何带有类名 response_text 的标签。

<div class="response_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea --CUT OFF HERE-- commodo consequat. Duis aute irure dolor in reprehenderit in</div>

.show_me {
  display:none;
}

function makeToggle(ele){
  var html = $("." + ele).html();
  var textarray = html.split("--CUT OFF HERE--");
  var p = $("<p />").text(html).addClass("hide_me");
  var p1 = $("<p />").text(textarray[0]).addClass("show_me");
  var brn = $("<button />").click(function(){
    $(".hide_me").hide();
    $(".show_me").show();
  }).text("hide me").addClass("hide_me");
  var brn1 = $("<button />").click(function(){
    $(".show_me").hide();
    $(".hide_me").show();
  }).text("show more").addClass("show_me");
  $("." + ele).html("").append(p).append(p1).append(brn).append(brn1);
}
makeToggle("response_text");

http://jsfiddle.net/NNMh3/16/

于 2013-05-21T19:00:06.287 回答