使用初始部分查看隐藏/显示div

时间:2013-11-29 14:11:23

标签: jquery css

http://jsfiddle.net/7RDBk/1/

目前我有一个slideUp和slideDown函数来隐藏和显示div。我试图在它扩展之前初始显示25px并且在点击时返回到25px。我本以为这会是直截了当但我似乎无法找到一种方法来检查if语句中的属性,以确定它是否已经扩展,然后才知道是否向上滑动。

 if($(this).prev().is(':hidden') == true) { ..

即改为

 if($(this).prev().height() == 25) { ..

我已经检查了CSS属性和溢出但这些似乎不起作用。我不能在这一点上添加类或者将它包装到任何父div中,是否可以使用这两个div作为小提琴?

1 个答案:

答案 0 :(得分:3)

一种方法是使用jQuery的函数animatedata,例如

http://jsfiddle.net/H9LzU/

$('.readMoreTrigger').click(function () {
     if ($('.readMoreContent').data('shown')) {
         $(this).text('Read more..');
         $('.readMoreContent').animate({
             "height": "25px"
         }, 'fast');
         $('.readMoreContent').data('shown',false);
     } else {
         $(this).text('Read less..');
         $('.readMoreContent').animate({
             "height": $('.readMoreContent').data("orig_height")
         }, 'fast');
         $('.readMoreContent').data('shown',true);
     }
     /*$('.readMoreContent').slideUp('fast');
        if($(this).prev().is(':hidden') == true) {
            $(this).prev().slideDown('fast');
            $(this).text('Read less..')
        }*/
 });
 /*$('.readMoreContent').hide();*/
 $('.readMoreContent').data("orig_height", $('.readMoreContent').css("height")).css({
     height: "25px"
 });