8

我一直在尝试解决这个问题，但我看不到任何问题 - 同样，相同的手风琴（相同的 jqueryui 版本 1.9.2）在另一个站点上也没有问题，我什至将主题切换为使用与另一个站点相同的站点，但我仍然对这个站点感到不安。

它也不应该是 jquery ui 主题，因为它在这里工作正常

任何想法可能是什么？

4

7 回答 7

13

对于未来的读者，当我没有将手风琴行的内容包装在 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>
于 2013-06-09T14:52:14.720 回答
7 
.ui-accordion .ui-accordion-content {
    padding: 1em 2.2em;
}

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

于 2013-03-19T13:46:46.280 回答
2

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

这对我有用：

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

顺便说一句，我已经hightstyle设置了内容。

希望这可以帮助！

于 2013-12-16T20:55:43.160 回答
2

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

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

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

于 2014-01-28T22:50:37.343 回答
2

动作流畅的关键是“heightStyle”EG

$( "#accordion" ).accordion({
    heightStyle: "content"
});
于 2016-04-12T11:12:17.670 回答
1

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

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

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

于 2013-03-19T13:50:28.160 回答
1

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

于 2015-05-13T15:03:06.767 回答