jquery-ui 手风琴问题：动画冻结 +点击时不显示内容

Question

我正在尝试 jQueryUI 手风琴。我创建了一个测试站点，复制了代码并将其放置到位。效果很好。

然后我尝试将其放入我的网站中。在我的网站上，我有两个菜单。一种是水平的，在顶部。另一个是垂直的，向左。我打算将手风琴应用于垂直菜单。当单击顶部水平菜单中的不同项目时，垂直菜单也会发生变化。

我做的第一件事就是在我的主页上测试它，看看是否与我当前的设计有任何冲突。垂直菜单的代码是这样的：

<!-- leftFrame begin -->
<div id="leftFrame">
    <div id="accordion">
        <h3><a href="#section1">Section 1</a></h3>
        <div>
            <p>homepage11111111</p>
        </div>

        <h3><a href="#section2">Section 2</a></h3>
        <div>
            <p>homepage22222222</p>
        </div>

        <h3><a href="#section3">Section 3</a></h3>
        <div>
            <p>homepage33333333</p>
            <ul>
                <li>List item</li>
                <li>List item</li>
                <li>List item</li>
                <li>List item</li>
            </ul>
            <a href="#othercontent">Link to other content</a>
        </div>
    </div>
</div>  <!-- leftFrame end -->

<script type="text/javascript">
    $(document).ready(function(){
        $( "#accordion" ).accordion({
            autoHeight: false,
            navigation: true
        });
    });
</script>

问题来了。第一个处罚被扩大为默认。当我单击不同的面板时，该面板下的内容未显示。它只是膨胀了一点点，然后就冻结在那里了。第一个面板也没有倒塌。所有面板都变得不可点击。就像下面的屏幕截图：

有趣的是，如果我将手风琴部分放在单独的 leftmenu.html 文件中并使用“$('#leftFrame').load(leftmenu.html)”将其加载到“leftFrame”div中。一切又恢复正常了。

我的第一个想法是主页中的其他一些 javascript 或 css 可能会影响这一点。我尝试注释掉部分然后所有其他 javascript 或 css。在使用 .load 函数正常工作时，它仍然无法在主页上工作。

知道为什么吗？

提前致谢 米洛

Answer 1

我原来是为了缓解不同js文件之间的冲突。只需确保仅使用一种版本的缓动函数即可。

Answer 2

我知道您有答案，但对于其他人来说，当我通过克隆添加新部分时，我遇到了类似的问题，具有相同的奇怪行为。

我克隆了手风琴的第一个（唯一的）部分，将其附加到末尾，然后更改标题和内容以满足我的需要。之后，我销毁并重新添加了手风琴，以确保它可以与新内容配合使用。之后，多个（全新）部分显示为活动部分（由于克隆），当我单击它们时，它们最初会工作，但在某个时刻突然停止工作。

为了解决此问题，我执行了以下操作：

1. 在克隆/附加之前移动了销毁
2. 克隆/附加了我的新部分
3. 根据需要修改了我的部分内容
4. 添加回了手风琴功能。

希望这对沿线的人有所帮助。