手风琴菜单和innerHTML

Question

我一直在使用共享软件 JS 手风琴式侧边栏 (www.dynamicdrive.com/dynamicindex1/slashdot.htm)。它与基于 PHP 的 HTML 完美配合，但不适用于 AJAX。

侧边栏建立在<div>、<span>和<a>元素之上。下面是一段JS代码：

for (var i = 0; i < this.submenus.length; i++)
    this.submenus[i].getElementsByTagName("span")[0].onclick = function() {
        mainInstance.toggleMenu(this.parentNode);
    };

如果我使用如下硬编码的 HTML（或使用 PHP 构造相同的 HTML），它可以正常工作：

<div id="navbar_side" class="sdmenu">
<div><span>STUDENTS</span><a>Adding Students</a><a>Deleting Students</a></div>
</div> 

但是，如果我开始：

<div id="navbar_side" class="sdmenu"></div>

然后使用这个：

document.getElementById("navbar_side").innerHTML="<div><span>STUDENTS</span><a>Adding Students</a><a>Deleting Students</a></div>"; 

菜单不滑动。信息都在那里。 <a hrefs> 全部工作（我在这里省略了）。但是手风琴运动并没有 - 嗯...... - 移动！

这是为什么？显然，菜单读取 AJAX 构建的节点树的方式与 PHP 构建的节点树不同。

谢谢， 尼克

Answer 1

建议您使用jQuery UI - Accordion 重新开始您的工作。更清洁、更有效。