Javascript 为什么jQuery UI手风琴打开/关闭动画如此多变？

我一直在试图弄清楚这一点，但我看不到任何问题——同样的手风琴（同样的jqueryui版本1.9.2）在另一个网站上也没有问题，我甚至切换了主题以使用与另一个网站相同的主题，我仍然在这一个网站上感到不安

而且它也不应该是jQueryUI主题，因为它工作得很好

有什么想法吗

.ui-accordion .ui-accordion-content {
    padding: 1em 2.2em;
}

---

问题在于这个css。如果您将其更改为px而不是em，它将正常工作。

我认为您忘记了在标记中添加所有文件依赖项

<script type='text/javascript' src='http://www.georgiancollege.ca/programs/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
<script type='text/javascript' src='http://www.georgiancollege.ca/programs/wp-includes/js/jquery/ui/jquery.ui.core.min.js?ver=1.9.2'></script>
<script type='text/javascript' src='http://www.georgiancollege.ca/programs/wp-includes/js/jquery/ui/jquery.ui.widget.min.js?ver=1.9.2'></script>
<script type='text/javascript' src='http://www.georgiancollege.ca/programs/wp-includes/js/jquery/ui/jquery.ui.accordion.min.js?ver=1.9.2'></script>
<script type='text/javascript' src='http://www.georgiancollege.ca/programs/wp-includes/js/jquery/ui/jquery.ui.button.min.js?ver=1.9.2'></script>

---

包括所有依赖项，那么它应该可以正常工作

对于未来的读者，当我没有将手风琴行的内容包装到div标签中时，我也遇到了这个问题：

坏：

        <div class="accordion">
            <h3>Delivery Address</h3>
            <table class="address">
                <tr><td>...</td></tr>
            </table>
        </div>

        <div class="accordion">
            <h3>Delivery Address</h3>
            <div>
                <table class="address">
                    <tr><td>...</td></tr>
                </table>
            </div>
        </div>

送货地址
...

好：

        <div class="accordion">
            <h3>Delivery Address</h3>
            <table class="address">
                <tr><td>...</td></tr>
            </table>
        </div>

        <div class="accordion">
            <h3>Delivery Address</h3>
            <div>
                <table class="address">
                    <tr><td>...</td></tr>
                </table>
            </div>
        </div>

送货地址
...

我也遇到了类似的问题。在寻找了一些不同的解决方案之后。我发现这是一个保证金问题

这对我很有用：

#accordion.ui accordion头文件{
保证金：0；
}

顺便说一下，我已将

hightstyle

设置为content

---

希望这有帮助

在我的例子中，这是由我的手风琴标题的边距和手风琴内容中元素的边距造成的。您需要将这些元素的边距设置为0。如果您想在这些元素之间添加空间，可以使用填充，这样不会导致问题

#accordion h3 {
margin: 0;
padding: 10px 0;
}
#accordion p {
    margin: 0;
    padding: 10px 0;
}

---

我在手风琴内容的div中使用了段落标记。如果使用其他内容，请确保该元素的边距设置为0。

我在Drupal中遇到了一个类似的问题，该问题是使用嵌套的accordion视图构建的。我删除了views-nested-accordion.css的第38行，该行包含

.ui accordion.ui accordion内容{height:auto！important；}

，解决了我的问题

平稳动作的关键是“高度风格”如

---

将JavaScript调用粘贴到acordion。是否传递了任何可选参数？您的HTML标记无效。段落标记内不能有h1和div元素。通过html验证程序运行代码并修复问题。@epascarello甚至没有注意到这一点-它一定是由wordpress editor添加的。这之所以会产生差异，很可能是因为所述accordion周围的字体设置，比如说手风琴的母琴没有和琴身一样的字体大小。这很奇怪，但对我来说，反之亦然。如果我改为px填充，动画会变得不稳定，如果我返回到至少0.65em，动画会变得平滑。感谢这一技巧，我在得到这一点之前非常沮丧，仅供参考-我将手风琴剥离到了裸露的骨骼，它在动画过程中仍在跳下，完成后又重新跳起来。然后我在上面添加了这些样式，问题就解决了。另外，对我来说，

#accordion h3{margin:0；}

是唯一重要的样式……请确保没有明确设置内容面板的高度（甚至设置为自动）。那帮我修好了。