jQuery使用<div> ()、hide()和size()基于子<p>读取更多/读更少的内容；
我使用jQuery创建了一个脚本，它显示并隐藏了除div中的第一段之外的所有内容，从而提供了读取更多/读取更少的效果。它的基本职能如下：
- 最初在.description div中隐藏除第一个p之外的所有内容
- 如果div中超过1p，则显示“读取更多”按钮。
- 在单击“多读”时显示所有段落，并将“读取更多”按钮替换为“读更少”按钮。
- 隐藏除第一段以外的所有内容，单击“减少阅读”时，用“阅读更多”替换“阅读更少”。
您可以在这里查看此脚本：http://jsfiddle.net/0li4tw/Nv27E/
paragraphCount = $(".description > p").size();
$("#hider").hide();
$("#shower").hide();
if (paragraphCount > 1) {
$("#shower").show();
}
$( "#hider" ).click(function() {
$(".description p").not(":first").hide();
$("#hider").hide();
$("#shower").show();
});
$( "#shower" ).click(function() {
$(".description p").show();
$("#shower").hide();
$("#hider").show();
});
$(".description p").not(":first").hide();与脚本相关的特定浏览器(我对jquery/javascript非常陌生)是否存在明显的问题，或者是否有任何更有效的方法来获得相同的结果？
非常感谢
回答 3
Stack Overflow用户
发布于 2014-01-31 13:35:27
我会使用一些东西来针对所有的描述，并将所有可切换的内容包装在一个容器中，以防我想要做的事情不仅仅是切换/隐藏它们(可能是效果？)。
$('.description').each(function() {
// if there are more than just one P
if ( $(this).children('p').length > 1 ) {
// wrap them in a container & also have class .hidden (hides content)
$('p:not(:first-child)').wrapAll('<div class="descr-extended hidden"></div>');
}
});
$('.descr-toggler').on('click', function() {
$('.descr-extended').toggleClass('hidden'); // toggling visibility w .hidden
});更多的-> http://jsfiddle.net/0li4tw/Nv27E/
改进:使用一些相关的按钮“prev(‘..desc Extended’)”(并且只在隐藏内容的情况下从脚本中添加按钮)
Stack Overflow用户
发布于 2014-01-31 13:31:49
它起作用了。您可以使用切换()在显示时隐藏，在隐藏时显示。它减少了您的代码：
paragraphCount = $(".description > p").size();
$("#hider").hide();
$("#shower").hide();
if (paragraphCount > 1) {
$("#shower").show();
}
$( "#hider, #shower" ).click(function() {
$(".description p").not(":first").toggle();
$("#hider").toggle();
$("#shower").toggle();
});
$(".description p").not(":first").hide();Stack Overflow用户
发布于 2014-01-31 13:35:34
我做了一个类似的实验。这也支持更多的复杂HTML标签。最好的部分是，它使用data-属性。
$(document).ready(function(){
length = 200;
cHtml = $(".content").html();
cText = $(".content").text().substr(0, length).trim();
$(".content").addClass("compressed").html(cText + "... <a href='#' class='exp'>More</a>");
window.handler = function()
{
$('.exp').click(function(){
if ($(".content").hasClass("compressed"))
{
$(".content").html(cHtml + "<a href='#' class='exp'>Less</a>");
$(".content").removeClass("compressed");
handler();
return false;
}
else
{
$(".content").html(cText + "... <a href='#' class='exp'>More</a>");
$(".content").addClass("compressed");
handler();
return false;
}
});
}
handler();
});小提琴：http://jsfiddle.net/praveenscience/SZLgs/
https://stackoverflow.com/questions/21481223
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号