1

jQuery UI Accordion 出现了非常奇怪的错误。

版本信息

  • Internet Explorer 8、9 和 10 --> 打开了“兼容性视图”。
  • jQuery UI 1.10.1
  • jQuery 核心 1.9.1

问题场景

我有多个垂直堆叠的独立手风琴。当我单击标题以折叠或展开顶部的手风琴时，下面的元素会上下滑动，就像您希望为出现/消失的内容腾出空间一样。但是，正下方的手风琴标题保持在原地悬停，而其他所有内容都向下滑动。看起来真的很糟糕。当您将鼠标光标悬停在此流氓浮动标题上时，它会弹回应位于的位置。

代码

希望我以后可以建立一个 jsFiddle，如果/当我的工作解除对站点的阻塞（翻白眼）。现在，这是代码的简化版本：

<script>
    $(document).ready(function ()
    {
        $(".accordion").accordion(
        {
            collapsible: true,
            active: 0,
            heightStyle: 'content',            
            icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" }
        });
    });
</script>
<style>
    .whitebackground { background-color: #FFF; }
    .contentDiv { height: 70px; background-color: lightblue; }
</style>
<div>    
    <div class="whitebackground">
        <table>
            <tr>
                <td>
                    <div class="accordion">
                        <h3>Accordion Header 1</h3>
                        <div>
                            <div class="contentDiv">
                                Some content here 1
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
        <table>
            <tr>
                <td>
                    <div class="accordion">
                        <h3>Accordion Header 2</h3>
                        <div>
                            <div class="contentDiv">
                                Some content here 2
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>

重现错误

要重现该错误，只需尝试通过单击标题折叠顶部手风琴，您将立即看到问题。

我已经缩小了范围...

我已经能够缩小导致此问题的确切问题的范围。如果您删除 whitebackground CSS 类，问题就会消失。为什么会发生这种情况？这对你们来说似乎是一个错误吗？

请阅读最后一部分

是的，我需要保持我的 HTML 结构原样。我已经为这个例子大大简化了它，同时仍然保持错误。我只想说我确实想保留 TABLE 元素。无需建议删除它。而且我需要让包含 TABLE 的 DIV 也能够指定 CSS 背景颜色。另外，我不能让用户在 IE 中关闭“兼容性视图”，因为我们的 AD 组策略会在访问内部 Web 应用程序时强制所有人启用它。

有任何想法吗？

4

1 回答 1

0

这似乎是由应用于 .ui-accordion-header 的 position:relative css 规则引起的。将其注释掉似乎可以解决 IE 兼容模式下的问题。

.ui-accordion .ui-accordion-header {
    display: block;
    cursor: pointer;
    /*position: relative;*/
    margin-top: 2px;
    padding: .5em .5em .5em .7em;
    min-height: 0; /* support: IE7 */
}

但是，这会导致标题图标显示在错误的位置。你必须调整他们的 CSS 来弥补。也可能有其他副作用。

于 2013-08-06T16:52:39.263 回答