jquery多个，可变高度的div，显示和隐藏答案

【问题标题】：jquery multiple, variable height divs, show and hidejquery多个，可变高度的div，显示和隐藏
【发布时间】：2011-07-15 04:14:07
【问题描述】：

我似乎无法理解。其他所有人的示例或问题都使用不同的功能，或者不是可变高度。此外，它们都是同一个班级，所以我的另一个问题是在这个烂摊子中添加 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

【问题讨论】：

您的问题到底是什么？
我点击打开第一个 div，它们都打开了。我只在 html 标记中发布了其中一个……我的错。不过，所有其他 div 大致相同。
这里是全力以赴的：（不是我选择的内容，而是……）doctorhtiller.com/procedures.html
您没有使用任何指定的定位 - 这就是真正缺少的全部。请参阅下面的更新答案以获取演示，我希望它能澄清一些事情

标签： jquery variables height html

【解决方案1】：

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

是否需要处理多张幻灯片？

编辑 在注意到对提到多张幻灯片的问题进行编辑后：

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

【讨论】：

是的，但应该有多个 div 可以打开和关闭。我可以在 css 中很好地定位目标……我在 JS 中尝试做的所有事情都会破坏……感谢您的帮助
@Jeremey，您在我的回答中看到第二个链接了吗？它有多个 div 在那里工作。我已经改变了这一点，因为我没有你的 CSS，但理论应该很容易转移。你还有这个问题吗？
就是这样！！谢谢你。所以你只是添加了“每个”，然后添加了“.next().children('a')”来定位 div 的锚点？这也不需要使用id？
改变了一点，但有效，因为您需要获取与单击元素相对应的幻灯片，您可以使用位置选择器（如 next()）。您会注意到您页面的来源有 4 个 jsreadmore div 而不是 2 个。我会选择更简洁的实现 - 如果我可以帮助集成它，请告诉我！
flippen 地狱，刚刚重新加载你的页面，看看它已经在工作了！那很快！！ :)

【解决方案2】：

您的代码有问题：defHeight 等于 20，因此第一个 if 始终为 false，并且没有任何反应，因为 defHeight >= slideHeight 始终为 false。

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

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

但是这个

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

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

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

【讨论】：

你怎么知道 defHeight 是 20？我在帖子中没有看到足够的信息来做出这个决定。
我不认为这是一个安全的假设；此外，您不需要使用 live 因为您在添加元素后绑定事件（尽管在创建 dom 之后）。
唯一认为我看到的定义是幻灯片高度。如果我在看和你一样的东西。 defHeight 应该由 .jswrap div 控制……对吧？