为什么jQuery UI手风琴打开/关闭动画如此波涛汹涌？

我一直在试图找出这一个，我只是不能看到任何问题 - 以及相同的手风琴（相同jqueryui版本1.9.2）在另一个网站上没有问题，我甚至将主题切换到使用与其他网站相同的网站，我仍然对这个网站感到不快。为什么jQuery UI手风琴打开/关闭动画如此波涛汹涌？

http://www.georgiancollege.ca/wpnew/accordion/?bypass=cache

（工作手风琴）http://www.georgiancollege.ca/programs/

，要么因为它的正常工作here

任何想法可能是什么，应该不会是jQuery UI的主题？

来源

2013-03-19 tsdexter

的JavaScript调用的acordion粘贴。是否有任何可选参数通过？ – Cristy 2013-03-19 13:45:00

您的HTML标记无效。段落标签内不能有h1和div元素。通过HTML验证器运行代码并修复问题。 – epascarello 2013-03-19 13:47:27

@epascarello甚至没有注意到 - 它一定是由wordpress编辑器添加的。 – tsdexter 2013-03-19 14:22:46

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

问题在于这个CSS。如果您将其更改为px而不是em，则其功能正常。

来源

2013-03-19 13:46:46

而这种差异造成的原因很可能是由于所述手风琴周围的字体设置，例如手风琴的父母没有与身体相同的字体大小。 – 2013-03-19 14:24:42

@Brad M - 谢谢，那就是诀窍。 – tsdexter 2013-03-26 14:32:35

我想你已经忘记了添加的所有文件相关性，在标签

<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-19 13:50:28 MarmiK

对于未来的读者，我也当我遇到这个问题没有包裹着我的手风琴行的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-09 14:52:14

感谢您的提示，在我得到这一点之前，我非常沮丧 – 2013-09-11 18:17:55

我有一个类似的问题。看了几个不同的解决方案。我发现这是一个保证金问题。

这为我工作：

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

我有hightstyle设置为通过内容的方式。

希望这会有所帮助！

来源

2013-12-16 20:55:43

在我的情况下，这是由于我的手风琴名称的边距以及手风琴内容中元素的边缘。您需要将这些元素的边距设置为0.如果您想在这些元素之间添加空格，则可以使用填充并且不会导致问题。

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

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

来源

2014-01-28 22:50:37 user2671295

仅供参考 - 我将手风琴放到其裸露的骨头上，它在动画制作过程中仍然跳下来，并在完成时备份。然后我在上面添加了这些样式，并且问题修复了它自己。 – 2014-03-24 20:27:25

另外，对我来说，'#accordion h3 {margin：0; }'是唯一重要的风格。 – 2014-03-24 20:44:20

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

来源

2015-05-13 15:03:06 Kirby

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

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

来源

2016-04-12 11:12:17 john

为什么jQuery UI手风琴打开/关闭动画如此波涛汹涌？

回答

相关问题