Javascript 扩展多读/少读jQuery脚本_Javascript_Jquery

Javascript 扩展多读/少读jQuery脚本

javascript jquery

Javascript 扩展多读/少读jQuery脚本,javascript,jquery,Javascript,Jquery,我有一个很棒的脚本，它使用jQuery显示一小部分内容&允许用户多读/少读内容。这是我现在的小提琴：摘要：单击图像时，需要显示附加文本。我想知道如何更新这个脚本，允许用户点击相关的图像，它将显示更多的文本（以及保持文本链接的位置）有人能告诉我如何做到这一点吗下面是我的示例HTML： <article id="post-5" > <div class="more-less"> <div cla

我有一个很棒的脚本，它使用jQuery显示一小部分内容&允许用户多读/少读内容。这是我现在的小提琴：

摘要：单击图像时，需要显示附加文本。

我想知道如何更新这个脚本，允许用户点击相关的图像，它将显示更多的文本（以及保持文本链接的位置）

有人能告诉我如何做到这一点吗

下面是我的示例HTML：

<article id="post-5" >

            <div class="more-less">    
                <div class="more-block">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam purus, lacinia eget placerat sit amet, bibendum nec nisl. Curabitur a mattis ipsum. Praesent quis nisi in purus malesuada rhoncus. Pellentesque ut quam eget libero congue lobortis. Nunc sed quam ac erat lobortis eleifend. Donec elementum sodales cursus. Aliquam porttitor massa nisi, in laoreet turpis. Sed consequat condimentum lorem ut dignissim. Sed hendrerit mauris ut massa fermentum laoreet. Pellentesque a leo vitae enim dictum lobortis. Praesent commodo feugiat velit iaculis malesuada.</p>
                    <p>Phasellus id elit ac lacus faucibus ullamcorper. Etiam ullamcorper pretium tellus, ut pharetra ante pulvinar vel. Sed neque diam, semper vel rhoncus non, congue ut sapien. Integer a mi eget libero elementum lobortis. Donec hendrerit egestas ligula sit amet eleifend. Curabitur pharetra venenatis tempor. Quisque pulvinar malesuada justo, ut euismod arcu pharetra vitae. Cras lobortis, ligula id euismod euismod, ipsum risus varius urna, faucibus gravida lectus mi nec nulla. Fusce eleifend fringilla nibh ut vulputate. Vivamus sagittis leo metus. Etiam facilisis convallis lacus adipiscing hendrerit. Duis ultricies euismod libero, nec blandit est semper a. Phasellus sit amet justo sed quam elementum lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>

            <p>
                <a href="#" title="News Item 1"><img src="http://placehold.it/300x187" alt="News Item 1" width="300" height="187" /></a>
            </p>            

        </article><!-- #post-## -->

$(function(){
        // The height of the content block when it's not expanded
        var adjustheight = 130;
        // The "more" link text
        var moreText = "Click to read more...";
        // The "less" link text
        var lessText = "Click to read less...";
        // Sets the .more-block div to the specified height and hides any content that overflows
        $(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden');
        // The section added to the bottom of the "more-less" div
        $(".more-less").append('<p style="display:block;margin-top:8px"><a href="#" class="adjust"></a></p>');
        $("a.adjust").text(moreText);
        $(".adjust").toggle(function() {
                $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
                // Hide the [...] when expanded
                $(this).parents("div:first").find("p.continued").css('display', 'none');
                $(this).text(lessText);
            }, function() {
                $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
                $(this).parents("div:first").find("p.continued").css('display', 'block');
                $(this).text(moreText);
        });
        });

和我的jQuery：

<article id="post-5" >

            <div class="more-less">    
                <div class="more-block">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam purus, lacinia eget placerat sit amet, bibendum nec nisl. Curabitur a mattis ipsum. Praesent quis nisi in purus malesuada rhoncus. Pellentesque ut quam eget libero congue lobortis. Nunc sed quam ac erat lobortis eleifend. Donec elementum sodales cursus. Aliquam porttitor massa nisi, in laoreet turpis. Sed consequat condimentum lorem ut dignissim. Sed hendrerit mauris ut massa fermentum laoreet. Pellentesque a leo vitae enim dictum lobortis. Praesent commodo feugiat velit iaculis malesuada.</p>
                    <p>Phasellus id elit ac lacus faucibus ullamcorper. Etiam ullamcorper pretium tellus, ut pharetra ante pulvinar vel. Sed neque diam, semper vel rhoncus non, congue ut sapien. Integer a mi eget libero elementum lobortis. Donec hendrerit egestas ligula sit amet eleifend. Curabitur pharetra venenatis tempor. Quisque pulvinar malesuada justo, ut euismod arcu pharetra vitae. Cras lobortis, ligula id euismod euismod, ipsum risus varius urna, faucibus gravida lectus mi nec nulla. Fusce eleifend fringilla nibh ut vulputate. Vivamus sagittis leo metus. Etiam facilisis convallis lacus adipiscing hendrerit. Duis ultricies euismod libero, nec blandit est semper a. Phasellus sit amet justo sed quam elementum lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>

            <p>
                <a href="#" title="News Item 1"><img src="http://placehold.it/300x187" alt="News Item 1" width="300" height="187" /></a>
            </p>            

        </article><!-- #post-## -->

$(function(){
        // The height of the content block when it's not expanded
        var adjustheight = 130;
        // The "more" link text
        var moreText = "Click to read more...";
        // The "less" link text
        var lessText = "Click to read less...";
        // Sets the .more-block div to the specified height and hides any content that overflows
        $(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden');
        // The section added to the bottom of the "more-less" div
        $(".more-less").append('<p style="display:block;margin-top:8px"><a href="#" class="adjust"></a></p>');
        $("a.adjust").text(moreText);
        $(".adjust").toggle(function() {
                $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
                // Hide the [...] when expanded
                $(this).parents("div:first").find("p.continued").css('display', 'none');
                $(this).text(lessText);
            }, function() {
                $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
                $(this).parents("div:first").find("p.continued").css('display', 'block');
                $(this).text(moreText);
        });
        });

$（函数（）{
//内容块未展开时的高度
高度=130；
//“更多”链接文本
var moreText=“单击以阅读更多…”；
//“更少”链接文本
var lessText=“单击以减少阅读…”；
//将.more块div设置为指定高度并隐藏溢出的任何内容
$（“.more-less.more-block”）.css（'height'，adjustheight.）.css（'overflow'，'hidden'）；
//添加到“more-less”div底部的部分
$（“.more-less”）.append（“”）；
$（“a.adjust”）.text（更多文本）；
$（“.adjust”）.toggle（函数（）{
$（this）.parents（“div:first”）.find（“更多块”）.css（'height'，'auto'）.css（'overflow'，'visible'）；
//展开时隐藏[…]
$（this）.parents（“div:first”）.find（“p.continued”）.css（“display”，“none”）；
$（this）.text（lessText）；
}，函数（）{
$（this）.parents（“div:first”）.find（.more block”）.css（'height'，adjustheight）.css（'overflow'，'hidden'）；
$（this）.parents（“div:first”）.find（“p.continued”）.css（'display'，'block'）；
$（this）.text（moreText）；
});
});

谢谢：-）

您只需向img添加一个单击处理程序，如下所示：

您需要将逻辑从移动到您自己的实现，因为您有多个事件源

<article id="post-5" >
    <div class="more-less">    
        <div class="more-block">…</div>
    </div>
    <p>
         <a href="#post-5" class="adjust" title="News Item 1">…</a>
    </p>            
</article>

$（函数（）{
var adjustheight=130；//内容块未展开时的高度
变量文本={
更多：“点击阅读更多…”，
更少：“点击阅读更少…”
};
$（“文章”）。每个（函数（）{
var block=$（“.more block”，this）.css（{height:adjustheight，overflow:'hidden'}），
cont=$（“p.continue”，此），
切换=$（''）.text（text.more），
开=假；
$（“.more-less”，this）.append（$（”）.append（link））；
$（“a.adjust”，this）。单击（函数（）{
打开=！打开；
css（“高度”，打开？“自动”：调整高度）；
link.text（文本[打开？：“更少”：“更多]）；
继续[打开？“显示”：“隐藏”]（）；
}
});
});

您需要将逻辑从移动到您自己的实现，因为您有多个事件源

<article id="post-5" >
    <div class="more-less">    
        <div class="more-block">…</div>
    </div>
    <p>
         <a href="#post-5" class="adjust" title="News Item 1">…</a>
    </p>            
</article>

$（函数（）{
var adjustheight=130；//内容块未展开时的高度
变量文本={
更多：“点击阅读更多…”，
更少：“点击阅读更少…”
};
$（“文章”）。每个（函数（）{
var block=$（“.more block”，this）.css（{height:adjustheight，overflow:'hidden'}），
cont=$（“p.continue”，此），
切换=$（''）.text（text.more），
开=假；
$（“.more-less”，this）.append（$（”）.append（link））；
$（“a.adjust”，this）。单击（函数（）{
打开=！打开；
css（“高度”，打开？“自动”：调整高度）；
link.text（文本[打开？：“更少”：“更多]）；
继续[打开？“显示”：“隐藏”]（）；
}
});
});

只需将“单击阅读更多”元素的相同行为添加到图像元素中即可

如下所示设置切换处理程序时：

$(".adjust").toggle(function() {
        $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
        // Hide the [...] when expanded
        $(this).parents("div:first").find("p.continued").css('display', 'none');
        $(this).text(lessText);
    }, function() {
        $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
        $(this).parents("div:first").find("p.continued").css('display', 'block');
        $(this).text(moreText);
    });

只需使用jQuery选择图像元素，如本例所示：

$(".adjust, #img1, #img2").toggle(function() {
        $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
        // Hide the [...] when expanded
        $(this).parents("div:first").find("p.continued").css('display', 'none');
        $(this).text(lessText);
    }, function() {
        $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
        $(this).parents("div:first").find("p.continued").css('display', 'block');
        $(this).text(moreText);
    });

希望有帮助。

只需将“单击阅读更多”元素的相同行为添加到图像元素中即可

如下所示设置切换处理程序时：

$(".adjust").toggle(function() {
        $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
        // Hide the [...] when expanded
        $(this).parents("div:first").find("p.continued").css('display', 'none');
        $(this).text(lessText);
    }, function() {
        $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
        $(this).parents("div:first").find("p.continued").css('display', 'block');
        $(this).text(moreText);
    });

只需使用jQuery选择图像元素，如本例所示：

$(".adjust, #img1, #img2").toggle(function() {
        $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
        // Hide the [...] when expanded
        $(this).parents("div:first").find("p.continued").css('display', 'none');
        $(this).text(lessText);
    }, function() {
        $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
        $(this).parents("div:first").find("p.continued").css('display', 'block');
        $(this).text(moreText);
    });

希望能有所帮助。

我真的不明白您真正需要什么。当您单击图像时，它会显示文本：-）抱歉，如果不清楚的话。让

href

链接指向

#post-5

文章而不是任何地方是有意义的……我真的不明白您实际需要什么。当您单击图像时，它会显示文本：-）抱歉，如果不清楚的话。让

href

链接指向

#post-5

文章而不是无处…Wowzer！！！绝对完美。代码太简单了-太多，太感谢了，烤熟了！你让我今天过得很开心：-）哇哦！！！绝对完美。代码太简单了-太多，太感谢了，烤熟了！你让我开心了：-）非常非常感谢你花时间把这些整理好。我很快就会试试。谢谢你，非常感谢你花时间把这些整理好。我很快就会试试。非常感谢。