jQuery Accordion:IE动画问题

Nat*_*ong 17 jquery accordion

更新

我将其作为社区维基,原因有三:

  • 我不觉得我得到了明确的答案,但是
  • 我很久以前就不再需要答案,因为我推出了自己的手风琴功能
  • 这个问题得到了很多观点,很明显很多人仍然感兴趣

因此,如果有人想要更改/澄清这个问题并使其成为权威指南,请成为我的客人.


我正在使用jQuery的手风琴UI元素处理页面.我在那个例子上建模我的HTML,除了在<li>元素内部,我有一些无序的链接列表.像这样:

  $(document).ready(function() {
     $(".ui-accordion-container").accordion(
        {active: "a.default", alwaysOpen: true, autoHeight: false}
     );
  });

  <ul class="ui-accordion-container">
  <li> <!-- Start accordion section -->
   <a href='#' class="accordion-label">A Group of Links</a>
   <ul class="linklist">
      <li><a href="http://example.com">Example Link</a></li>
      <li><a href="http://example.com">Example Link</a></li>
   </ul>

   <!--and of course there's another group -->
Run Code Online (Sandbox Code Playgroud)

问题:IE动画很臭

虽然IE7动画文档的示例手风琴菜单很好,但它有我的问题.具体来说,页面上的一个手风琴菜单急剧移动并且内容闪烁. 我知道这不是一个CSS问题,因为如果我不包含我的CSS文件会发生同样的事情.

页面上的另一个手风琴菜单会打开您单击的第一个部分,之后将不会打开它们中的任何一个.

这两个问题都是特定于IE的,如果我使用该选项,它们都会消失animated: false.但是我想保留默认slide动画,因为它可以帮助用户理解菜单正在做什么.

还有另外一种方法吗?

Tyl*_*ler 21

我感觉到你的痛苦!我最近经历了一个荒谬的故障排除,我在主页和页面布局中逐块删除了所有内容(这实际上是在SharePoint中),不断减少页面.

最终结果是没有 html文档的doc类型(一些开发人员删除了它).缺少doctype意味着IE 7以怪癖模式运行,而JQuery Accordion发出的内联CSS表现得很时髦.

考虑添加:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Run Code Online (Sandbox Code Playgroud)

在您的母版页或html文档的顶部(如果尚未定义doctype).

实际上有一个专门用于Quirks Mode行为的整个站点.您可以在此处查看有关Quirks模式的文章.我写了一篇帖子,其中有关于故障排除的更多周边信息.

  • 你是我的英雄! (2认同)

小智 6

与IE7中的所有问题一样,具有格式良好的标准HTML标记.最终工作的是删除autoHeight: "false"和使用clearStyle: "true".
我还创建了一个IE <8版本的手风琴初始化:

if ( $.browser.msie && $.browser.version < 8 ) {
    //ie<8 version
}
else {
    //version for the good browsers
}
Run Code Online (Sandbox Code Playgroud)


Dar*_*o Z 5

我实际上已经避免使用手风琴插件了,因为我发现它对我的需求有点不灵活.我发现最简单,最灵活的手风琴就像:

var accordion = function(toggleEl, accEl) {
    toggleEl.click(function() {
        accEl.slideToggle(function() { });
        return false;
    });
}
Run Code Online (Sandbox Code Playgroud)

对于你的例子你会像这样使用它:

$(document).ready(function() {
    new accordion($("a.accordion-label"), $("ul. linklist"));        
});
Run Code Online (Sandbox Code Playgroud)

你可以使用它作为模板并构建css类添加,回调和其他有用的东西,但我发现最终这样做比使用手风琴插件更容易.

编辑:带回调函数的示例代码

var accordion = function(toggleEl, accEl, callback) {
    toggleEl.click(function() {
        accEl.slideToggle(callback);
        return false;
    });
}

$(document).ready(function() {
    new accordion($("a.accordion-label"), $("ul. linklist"), function() { /* some callback */ });        
});
Run Code Online (Sandbox Code Playgroud)


Pim*_*ger 0

在选项中你应该设置:

 navigation: true
Run Code Online (Sandbox Code Playgroud)