开发者

Help needed in modifying following JavaScript to not append if height is smaller or equal to 75px

开发者 https://www.devze.com 2023-04-05 05:07 出处:网络
I have a JavaScript function that adds a \"more\" button to a div that is hi开发者_如何学JAVAgher than 75px, so if the reader wants to read more he can click on the \"more\" button and the div will ex

I have a JavaScript function that adds a "more" button to a div that is hi开发者_如何学JAVAgher than 75px, so if the reader wants to read more he can click on the "more" button and the div will expand to its full size. The issue I'm facing is that it adds a "more" button even if the div is equal to or smaller than 75px in height.

So now I need help in modifying this script to not append <p class="continued">[…]</p><a href="#" class="adjust"></a> when the div is smaller or equal to 75px, but if it is higher than that than add the "more" button.

Any ideas? Thnx ))

$(function(){var adjustheight=75;
var moreText="↓ More";
var lessText="↑ Less";
$(".more-less .more-block").css('height',adjustheight).css('overflow','hidden');
$(".more-less").append('<p class="continued">[…]</p><a href="#" class="adjust"></a>');
$("a.adjust").text(moreText);
$(".adjust").toggle(function(){$(this).parents("div:first").find(".more-block").css('height','auto').css('overflow','visible').slideDown("slow");
$(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)})
}); 


Try this: http://jsfiddle.net/mv7RU/2/

$(function() {
    var adjustheight = 75;
    var moreText = "↓ More";
    var lessText = "↑ Less";
    $(".more-less").each(function() {
        if ($(this).height() > adjustheight ) {
            $(this).append('<p class="continued">[…]</p><a href="#" class="adjust"></a>');
        }
    });
    $(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden');


    $("a.adjust").text(moreText);
    $(".adjust").toggle(function() {
        $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible').slideDown("slow");
        $(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)
    })
});
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号