Jquery QuestionAnswer with slideToggle答案

【问题标题】：Jquery QuestionAnswer with slideToggleJquery QuestionAnswer with slideToggle
【发布时间】：2014-06-10 09:24:35
【问题描述】：

我有一个简单的问答页面。当用户点击一个问题时，会通过 slideToggle() 显示答案。

这很简单，但我被困在 Chrome、Safari 和 Opera 上，但在 Firefox 上工作，这对于前三个来说是可以预期的，因为它们是由 Webkit 和 Firefox 由 Gecko 运行的。我使用所有最新版本的上述浏览器。

代码是这样的……

( function() {
    $('.answer-list').addClass('answer-list-display');
    $('.question button').click(function() {
        $(this).next().slideToggle(300);
    });
} () )

这很简单，应该可以工作。

我找到了a similar answer（实际上和我的一样），但如果我使用visibility:hidden，答案的高度仍然存在，这会在问题之间造成差距。我还尝试通过控制height 和 animation() 函数来做到这一点，但仍然没有成功。

所有的 Webkit 浏览器都在第一时间显示答案。但在所有其他时间，我必须点击问题三次（！）才能看到答案。

我知道这是一个微不足道的问题，但实际上我花了 4 个小时试图做到这一点，几乎没有睡觉，这真的很令人沮丧。

我还从我多年前读过的一本书中找到了一个例子，Jquery The Missing Manual，它使用toggle() 方法和两个函数作为参数。在 Webkit 浏览器中仍然无法解决同样的问题。

感谢大家的回答。

【问题讨论】：

标签： jquery css slidetoggle

【解决方案1】：

好的。这是答案。

这是我这边的一个标记错误。我使用了无序列表。所有问题都在li 中，button 在li 中。答案在一个内部无序列表中。当用户单击按钮时，将显示内部列表。那没有用。

然后我切换到div 和p 以获取答案，button 用于问题并且一切正常。

每日提示：不要将任何类型的列表与 slideToggle、fadeToggle()、toggle() 或其他 Jquery 动画一起使用。似乎 Jquery 计算它们太复杂了，我已经尝试过了。嗯，大部分。谁知道...

【讨论】：