jQuery Read More/Read Less 基于使用 show(); <p> hide(<div>); 和 size();

Question

我已经使用jQuery创建了一个脚本，该脚本显示并隐藏了除第一个段落之外的所有段落，以提供更多读取/读取效果更少。它的基本功能是：

• 最初将所有第一个p除了在.DESCRIPTION DIV中
• 如果Div中有超过1 P，请显示一个"读取更多"按钮
• 在阅读更多单击时，显示所有段落，也替换阅读更多按钮，少阅读按钮
• 隐藏所有除第一段，然后用更多阅读读取更多的阅读单击"少阅读"时

您可以在此处查看此脚本：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的新手），或者也许还有更有效的方法可以获得相同的结果？

非常感谢

Answer 1

我会使用某些内容来定位所有描述，并将所有可切换内容包装在容器中，以防我想做的不仅仅是切换/隐藏的事情（也许效果吗？）。

$('.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/

改进：使用一些相对论w按钮" prev（'。desc-extended'）"（仅在隐藏内容时添加脚本中的按钮）

Answer 2

它有效。您可以使用toggle（）在显示时隐藏，并显示何时隐藏。它会减少您的代码：

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

Answer 3

我也进行了类似的实验。这也支持复杂的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/