Сделать частично скрытый div показать полный контент - PullRequest
Новая
       35

Сделать частично скрытый div показать полный контент

1 голос
/ 26 января 2012

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

Вот 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, который я нажимаю? Я пробовал зацикливаться с каждым, и т. Д., Но мне не повезло

1 Ответ

0 голосов
/ 26 января 2012

Вы можете просто выбрать предыдущий элемент в jQuery.Вот скрипт, который будет показывать контент, а затем скрывать его, если пользователь нажимает на ссылку readmore во второй раз.Это также меняет ярлык ссылки.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 live для вас: http://jsfiddle.net/JmLqp/

...