0

我有这个很棒的脚本，它使用 jQuery显示一小部分内容并允许用户阅读更多/阅读更少的内容。这是我目前的小提琴：http: //jsfiddle.net/Tqwdh/1/

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

我很想知道如何更新此脚本以允许用户单击关联的图像，它会显示更多的文本（以及保持文本链接到位）。

有人可以告诉我如何实现这一目标吗？

这是我的示例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-## -->

和我的jQuery：

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

谢谢 ：-）

4

4 回答 4

2

你可以像这样向 img 添加一个点击处理程序： DEMO

$(function(){
    $('img').click(function(){
        $(this).closest('article').find('.adjust').click();
    });
});​
于 2012-12-13T14:20:06.210 回答
1

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

当您像这样设置切换处理程序时：

$(".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);
    });

演示

希望能帮助到你。

于 2012-12-13T14:37:02.473 回答
1

您需要将逻辑从toggle处理程序移至您自己的实现，因为您有多个事件源。

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

$(function(){
    var adjustheight = 130; // The height of the content block when it's not expanded
    var texts = {
        more: "Click to read more…",
        less: "Click to read less…"
    };
    $("article").each(function() {
        var block = $(".more-block", this).css({height:adjustheight, overflow:'hidden'}),
            cont = $("p.continue", this),
            toggle = $('<a href="#'+this.id+'" class="adjust">').text(texts.more),
            open = false;
        $(".more-less", this).append($('<p style="display:block;margin-top:8px">').append(link));
        $("a.adjust", this).click(function() {
            open = !open;
            block.css("height", open ? "auto" : adjustheight);
            link.text(texts[open ? "less" : "more"]);
            cont[open ? "show" : "hide"]();
        }
    });
});
于 2012-12-13T14:27:47.720 回答
0 

 var maxLength = 50;
    $('.N_DESC').each( function (e) { 
        const thisVal = $(this).text();
        const thisLength = $.trim(thisVal).length;
        const noticeStr = thisVal.substring(0, maxLength);
        const removedStr = thisVal.substring(maxLength, thisLength);
        if(thisLength > maxLength){
            $(this).empty().html(noticeStr);
            $(this).append('<span class="more-text">'+ removedStr +'</span>');
            $(this).append(`<a href="javascript:void(0);" class="read-more" style="padding-left: 8px;">Read More..</a>`);
        }
    }); 
    $(document).on('click', '.read-more', function (e) { 
        $(this).closest('span').find('.more-text').show();
        $(this).addClass('read-less');
        $(this).removeClass('read-more');
        $(this).html('Read Less..');
    });
    $(document).on('click', '.read-less', function (e) { 
        $(this).closest('span').find('.more-text').hide();
        $(this).addClass('read-more');
        $(this).removeClass('read-less');
        $(this).html('Read More..');
    });
   .N_DESC .more-text{
        display: none;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="N_DESC">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor.</span>
<br>
<span class="N_DESC">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.</span>
<br>
<span class="N_DESC">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero</span>

于 2022-01-09T08:50:09.867 回答