我遇到了 jquery.droppy() 和 AJAX 的问题。
我有一个 HTML 菜单:
<ul id="nav">
<li><a id="toplev" href="/viewpage/69">Level 1</a>
<ul>
<li><a href="/viewpage/138">Level 2</a>
<ul>
<li><a href="/viewpage/149">Level 3-1</a></li>
<li><a href="/viewpage/150">Level 3-2</a></li>
<li><a href="/viewpage/148">Level 3-3</a></li>
<li><a href="/viewpage/139">Level 3-4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
我在 script.js 文件中调用 droppy 函数:
$(function() {
$('#nav').droppy();
});
一切都很好
我运行 ajax 调用:
function reloadNavBar() {
$.get('reloadnavbar',function(response) {
document.getElementById('nav').innerHTML = response;
}
);
$('#nav').droppy();
};
从而更新菜单:
<ul id="nav">
<li><a id="toplev" href="/viewpage/69">Level 1</a>
<ul>
<li><a href="/viewpage/138">Level 2</a>
<ul>
<li><a href="/viewpage/149">Level 3-1</a></li>
<li><a href="/viewpage/150">Level 3-2</a></li>
<li><a href="/viewpage/148">Level 3-3</a></li>
<li><a href="/viewpage/139">Level 3-4</a></li>
<li><a href="/viewpage/139">Level 3-5</a></li> //This line added
</ul>
</li>
</ul>
</li>
</ul>
现在菜单不会像 ajax 调用之前那样展开。我可以单击 1 级链接,它可以工作,只是不会在悬停时展开选择。
有什么建议吗?
最佳答案
问题是您的 $.get 函数可能在 html 更新之前尚未返回,因此您的 $('#nav').droppy()
不会针对新的执行生成的内容。将其移至回调函数内的 document.getElementById('nav').innerHTML = response
行之后。
关于php - AJAX 调用破坏了 .droppy() 导航栏扩展,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33677482/