Сделайте так, чтобы частично скрытый div отображал весь контент

Я был бы признателен, если бы вы могли найти решение для меня. У меня есть список статей, каждая из которых находится в частично скрытом div (высота div 200px). Когда я нажимаю «Дополнительно», он должен красиво скользить вниз, показывая остальную часть контента.

Вот html:

<style>
    .content {height:200px;}
</style>    
<div class="content_1">Full text here...</div><a href="" class="readmore"></a>
<div class="content_2">Full text here...</div><a href="" class="readmore"></a>
<div class="content_3">Full text here...</div><a href="" class="readmore"></a>
</div>

Вот код jquery (работает, но только для content_2:

var len = $('.wrap > .content').length;
  $("a.readmore").click(function(event){
    var hiddenContent = $(".wrap > .content_2");
   event.preventDefault();
   hiddenContent.animate({
    height: '500px'
  }, 1000, function() {
    // Animation complete.
  });

  });

Как мне перебрать ".content_"+i, чтобы я мог заставить его работать для конкретного div, на который я нажимаю? Я пытался зацикливаться с каждым, для и т. д., но мне не повезло


jquery each jquery-animate
person Kandinski    schedule 25.01.2012    source источник
comment
Используемые вами идентификаторы, где это должен быть класс и классы, где вы должны использовать идентификаторы..... Идентификаторы должны быть уникальными, а классы могут использоваться для нескольких элементов DOM.   -  person Manse    schedule 26.01.2012
comment
Меня также смущает, откуда загружается ваш контент? а где .wrap? возможно, попробуйте добавить jsfiddle.net, чтобы помочь нам понять вашу проблему?   -  person Manse    schedule 26.01.2012
comment
Да извини. Это опечатка, которую я сделал только здесь. Контент загружается из базы данных статей. Он загружает полный узел, а не обрезанный, но скрывает его часть и отображает ее после того, как вы нажмете «подробнее»..   -  person Kandinski    schedule 26.01.2012

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете очень просто выбрать предыдущий элемент в jQuery. Вот сценарий, который покажет содержимое, а затем скроет его, если пользователь нажмет ссылку «подробнее» во второй раз. Он также изменяет метку ссылки. jQuery делает все очень просто:

$("a.readmore").click(function(e){
    if($(this).prev("div.content").hasClass("open")){
        $(this).prev("div.content").animate({"height":50}).removeClass("open");
        $(this).html("More...");
    }else{
        $(this).prev("div.content").animate({"height":500}).addClass("open");
        $(this).html("Less...");
    }

    e.preventDefault();
});

А вот вам живой пример jsfiddle: http://jsfiddle.net/JmLqp/

person Steve O    schedule 25.01.2012
comment
Спасибо, ты сделал мой день. Я внимательно изучил ваш код, и действительно, функция prev() здесь очень полезна. Будь благословен! - person Kandinski; 26.01.2012