为什么jQuery UI手风琴打开/关闭动画如此不稳定?

Why is jQuery UI accordion open/close animation so choppy?

本文关键字：动画 不稳定 UI jQuery 手风琴 为什么      更新时间：2023-09-26

我一直在试图找出这个，我只是看不到任何问题-同样，相同的手风琴(相同的jqueryui版本1.9.2)在另一个网站上没有任何问题，我甚至切换了主题，使用与其他网站相同的主题，我仍然得到这一个的震荡。

它也不应该是jquery ui主题因为它工作得很好这里

你知道是什么吗?

对于未来的读者，当我没有在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>

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

问题在于这个css。如果你把它改成px而不是em，它会正常工作。

我有一个类似的问题。在看了几个不同的解决方案之后。我发现这是一个页边距问题。

这个为我工作:

#accordion .ui-accordion-header {
    margin:0;
}

顺便说一下，我把hightstyle设置为content。

希望这对你有帮助!

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

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

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

我在Drupal中使用Views nested accordion构建的嵌套手风琴中遇到了类似的问题。我删除了第38行视图嵌套的accordion.css有.ui-accordion .ui-accordion-content {height: auto !important;}，它解决了我的问题。

动作流畅的关键是"heightStyle" EG

$( "#accordion" ).accordion({
    heightStyle: "content"
});

我想你已经忘记添加所有的文件依赖关系，在标签

<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>

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

相关文章：