手风琴菜单和内部HTML

发布于 2024-12-26 03:29:47 字数 1221 浏览 1 评论 0原文

我一直在使用共享软件 JS 手风琴式侧边栏（www.dynamicdrive.com/dynamicindex1/slashdot.htm）。它可以很好地与基于 PHP 的 HTML 配合使用，但不能与 AJAX 配合使用。

侧边栏基于

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>";

菜单不会滑动。信息就在那里。都可以工作（我在这里省略了）。但是手风琴运动并没有——嗯……——移动！

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

谢谢，缺口

原文

I've been using a shareware JS accordion-style sidebar (www.dynamicdrive.com/dynamicindex1/slashdot.htm). It's been working beautifully with PHP-based HTML, but is not working with AJAX.

The sidebar builds itself on <div>,<span>and<a> elements. Here is a section of the JS code:

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

If I use hardcoded HTML like the following (or construct the same with PHP), it works fine:

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

However, if I start with:

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

and then use this:

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

the menu doesn't slide. The info is all there. The <a hrefs> all work (which I've left out here). But the accordion movement doesn't - well... - move!

Why is this? Clearly the menu is not reading the AJAX-constructed node tree the same way as the PHP-constructed one.

Thanks,
Nick

分享到QQ

分享到微博