【问题标题】:Expanding and Collapsing Div via Jquery & CSS通过 Jquery & CSS 展开和折叠 Div
【发布时间】:2014-01-22 01:02:32
【问题描述】:

我想在我创建的 jquery“点击功能”上使 div 的展开/折叠。我的问题和其他问题之间的区别在于,当 div 处于“折叠”状态时,我需要将它们的最大尺寸保持在“120px”,然后需要高度为“100%”。处于“扩展”状态。

每个父 div(即 div id = "1")都是从 SQL 数据库中动态创建的,具体取决于在其他地方处理的查询。一页上会有多个这样的 div(同样,取决于用户的查询)。

到目前为止,这是我的代码的 jsfiddle URL:http://jsfiddle.net/m22Gu/17/

【问题讨论】:

  • 您的问题是什么?您在单击时正确添加/删除了一个类,并使用该类上的 CSS 来控制状态。这是做这样的事情的推荐方法。您是否正在就这两个州的特定 CSS 寻求帮助?
  • 嗯..问题是它没有按照我的预期做。尝试点击 div 看看会发生什么。它对我来说只是上下反弹。谢谢。
  • 我想知道如何让 div 展开以便可以看到全文。当用户完成查看后,他们应该能够单击它并且它应该折叠。

标签: jquery css html


【解决方案1】:

这是否接近你所追求的?

DEMO HERE

如果您希望内容保持可见,则不能使用 slideToggle。而是简单地为 div 的高度设置动画。

【讨论】:

  • 哇!这正是我一直在寻找的。在花了三天时间尝试这样做(我还在学习)之后,我不知道如何向你展示我有多高兴。只是一个快速的,我如何使它们与描述 div 一起扩展?现在看起来很奇怪。
  • 很高兴为您提供帮助。要全部展开,您需要将点击事件移动到父 div,然后为子 div 设置动画。请参阅此处:(jsfiddle.net/m22Gu/24) 注意:您有两个具有相同 ID 的元素 - 您不应该这样做。我向父 div 添加了一个类,以便可以为单击事件调用它。
  • 好的,这又要好很多了。还有一个问题! :/。当我点击它(在我的实际页面上)时,最右边的 div 会移动到其他两个 div 下方。你知道是什么导致了这个问题吗?
  • 可能是因为你有浮动。您可能想使用 display: inline-block; 而不是浮点数。
  • 嗯...这似乎让我的 div 在主 div 中到处都是,而不是并排。
猜你喜欢
  • 2013-02-12
  • 2010-11-21
  • 2018-12-13
  • 1970-01-01
  • 2011-03-01
  • 2017-02-12
  • 2012-05-15
  • 2017-02-12
  • 1970-01-01
相关资源
最近更新 更多