Question

我想在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>

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

如何实现这一目标？

Answer 1

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

这是一个有点复杂的解决方案。结果是您正在使用.html()将内容的前半部分附加到HTML元素，并让jQuery为您关闭它。然后，当单击“read more”链接时，再次使用.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);

Answer 2

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

<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'）切换（300）。 }） }）（jQuery的）;

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

在此处查看小提琴：http://jsfiddle.net/wuGbh/

Answer 3

首先，你不应该在html中显示文本而不用任何html标签包装它。有各种方法用任何html标签，div，p，span等包装你的文本。所以这是我的假设你的文本包装器是div或任何带有classname 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/

jquery - 阅读更多，显示/隐藏HTML内容

3 个答案: