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. 在clone / append
之前移动了destroy
2. 克隆/附加我的新章节
3. 根据需要修改了我的部分内容
4. 添加了手风琴功能。

希望这有助于沿线的人。