Блог

РЕДАКТИРОВАТЬ: я действительно устал прошлой ночью и неправильно написал свой jQuery, «.readMore» всегда является триггером для анимации соответствующего div. Я прошу прощения.

Всем привет,

Я хотел бы извлечь конкретную информацию из элементов с тем же классом. У меня есть несколько divs, которые содержат разное количество текста, следовательно, их высоты также различаются. Однако я установил для класса, связанного с этими разделениями, высоту 200 пикселей. В нижней части каждого div у меня есть абсолютно позиционированный якорь, который позволяет читателю расширять (анимировать) div до его автоматической / естественной высоты.

Что я хотел бы сделать, так это узнать «автоматическую» высоту divs с тем же классом, сохранить ее, а затем вызвать ее позже, когда будет нажата привязка соответствующего div. Пока я продолжаю получать только одно значение или вообще ничего не получаю, тогда как я хотел бы получить их все.

Недавно я использовал .each (), но безрезультатно. Настоящая проблема, похоже, заключается в анимации divs, в противном случае это не проблема; просто нужно использовать .css(), чтобы установить высоту в auto . Это было бы намного проще, если бы вы могли анимировать свой рост в auto. Надеюсь, я правильно объясняю. В любом случае, вот мой код.

HTML

 <div class="stretch">
    text
    <a class="readMore">Read More</a>
</div>

<div class="stretch">
    text
    <a class="readMore">Read More</a>
</div>

<div class="stretch">
    text
    <a class="readMore">Read More</a>
</div>
  

CSS

 div.stretch {height:auto; width:100%; overflow:hidden; position:relative}
a.readMore {position:absolute; left:0; bottom:0;}
  

jQuery

 $divheight = //stored height of divs
$allheight = $divheight   100; //extra space to clear the anchor
$(".h200").height(200);
$(".stretch").addClass("h200"); //change height later, to be able to refer to automatic/natural height

$(".readmore").toggle(
    function(){
        $(this).parent('div').animate({height:$allheight}, 750);
        $(".readMore").text("Read Less");
    },
    function(){
        $(this).parent('div').animate({height:"200px"}, 250);
        $(".readMore").text("Read More");
    }
)
  

Заранее благодарю, я действительно ценю, что вы даже взглянули.

попробуйте это:

 $hiddenheight=200;
$extraspace=100;

$(".stretch")
.each(function(){
    $(this).data('actualheight', $(this).outerHeight() $extraspace).css('height', $hiddenheight 'px');    //outerHeight for including padding margin border, if any
})
.toggle(
    function(){
        $(this).animate({height: $(this).data('actualheight') 'px'}, 750);
        $(".readMore").text("Read Less");
    },
    function(){
        $(this).parent('div').animate({height:$hiddenheight "px"}, 250);
        $(".readMore").text("Read More");
    }
)
  

отрегулируйте значения высоты в соответствии с потребностями..

$.height() вернет фактическую высоту вашего элемента. Сохраните их, повторно используйте при вызове hide .

Вот так:

 $(".stretch").toggle(
    function(){
        $(this).data('oh', $(this).height());
        $(this).animate({height: 200}, 750);
    },
    function(){
        $(this).animate({height: $(this).data('oh')}, 250);
        $(this).data('oh', null);
    }
)