我将其作为社区维基,原因有三:
因此,如果有人想要更改/澄清这个问题并使其成为权威指南,请成为我的客人.
我正在使用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)
虽然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模式的文章.我写了一篇帖子,其中有关于故障排除的更多周边信息.
小智 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)
我实际上已经避免使用手风琴插件了,因为我发现它对我的需求有点不灵活.我发现最简单,最灵活的手风琴就像:
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)
归档时间: |
|
查看次数: |
31943 次 |
最近记录: |