Question

我似乎无法得到这个。其他所有示例或问题都使用不同的功能或不是可变高度。另外，他们都是同一个班级，所以我的另一个问题就是在这个烂摊子里添加id ....这就是说我非常困难。我会接受任何建议。谢谢你的帮助。

  $(function(){
    var slideHeight = 36; // px
    var defHeight = $('.jswrap').height();
    if(defHeight >= slideHeight){
        $('.jswrap').css('height' , slideHeight + 'px');
        $('.jsreadmore').append('<a href="#">Read More</a>');
        $('.jsreadmore a').click(function(){
            var curHeight = $('.jswrap').height();
            if(curHeight == slideHeight){
                $('.jswrap').animate({
                  height: defHeight
                }, "normal");
                $('.jsreadmore a').html('Close');
            }else{
                $('.jswrap').animate({
                  height: slideHeight
                }, "normal");
                $('.jsreadmore a').html('Read More');
            }
            return false;
        });
    }
    });

加价：

<div class="jscontainer">
  <h4>title</h4>
      <div class="jswrap">
        <p>Content</p>
      </div>
</div>

<div class="jscontainer">
  <h4>title2</h4>
      <div class="jswrap">
        <p>Content</p>
      </div>
</div>

here is the problem

Answer 1

你的代码有问题：defHeight是euqal到20，所以第一个if总是假的，没有任何反应因为defHeight＆gt; = slideHeight总是假的。

当你做对了，你不应该这样做：

  $('.jsreadmore a').click(function(){

但是这个

  $('.jsreadmore a').live('click', (function(){

因为在创建dom后附加了'a'，并且在新创建的元素上绑定事件需要使用实时

看看这个基本的小提琴http://jsfiddle.net/FmzBP/1/

Answer 2

这是你要做的事：http://jsfiddle.net/5VdBk/？

是否需要使用多张幻灯片？

修改 注意到编辑后提到多张幻灯片的问题：

更新版本，应处理不同内容大小的多张幻灯片 http://jsfiddle.net/5VdBk/1/

jquery multiple，可变高度div，显示和隐藏

2 个答案: