阅读更多

发表于 更新于 分类于 
1
2
<div id="wrap{{ subject.id }}" class="wrap">{{ subject.about_subject | safe }}</div>
<div id="read-more{{ subject.id }}" class="read-more"></div>
1
2
3
4
5
<style>
.wrap{position: relative;overflow: hidden;}
.read-more a{padding-right: 22px;background: url() no-repeat 100% 50%;font-weight: bold;text-decoration: none;}
.read-more a:hover{color: #000;}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script type="text/javascript">
{% for subject in subjects %}
$(function(){
 var slideHeight = 300; // px
 var defHeight = $('#wrap{{ subject.id }}').height();
 if(defHeight >= slideHeight){
  $('#wrap{{ subject.id }}').css('height' , slideHeight + 'px');
  $('#read-more{{ subject.id }}').append('<a href="#">查看更多</a>');
  $('#read-more{{ subject.id }} a').click(function(){
   var curHeight = $('#wrap{{ subject.id }}').height();
   if(curHeight == slideHeight){
    $('#wrap{{ subject.id }}').animate({
     height: defHeight
    }, "normal");
    $('#read-more{{ subject.id }} a').html('隐藏');
   }else{
    $('#wrap{{ subject.id }}').animate({
     height: slideHeight
    }, "normal");
    $('#read-more{{ subject.id }} a').html('查看更多');
   }
   return false;
  });
 }
});
{% endfor %}
</script>